DOM笔录
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom。
1、选择器
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');
2、内容
innerText
innerHTML
var obj = document.getElementById('nid')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>hello</h1>" # 设置HTML内容
特殊的：
input系列
textarea标签
select标签
value属性操作用户输入和选择的值
3、创建标签
方式一：
var obj = document.createElement('a');
obj.href = "http://www.etiantian.org";
obj.innerText = "hello DOM";
var container = document.getElementById('container');
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh'));
方式二：
var container = document.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
//container.insertAdjacentHTML("beforeEnd",obj);
4、标签属性
var obj = document.getElementById('container');
固定属性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px";
自定义属性
obj.setAttribute(name,value) // 设置属性
obj.getAttribute(name) // 获取属性
obj.removeAttribute(name) // 删除属性
5、提交表单
document.geElementById('form').submit();
6、事件
特殊的：
window.onload = function(){} //jQuery：$(document).ready(function(){}) //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。
//图片还么有渲染，就可以进行事件的执行。
特殊参数：this，event
7、特殊功能
console.log() // 后台输出显示
alert() // 页面弹出对话框，显示内容信息
confirm()
// URL和刷新
location.href // 显示URL
location.href = "url" window.location.reload() // 刷新页面
// 定时器
setInterval("alert()",2000); // 设置定时器，单位 毫秒
clearInterval(obj); // 清除
setTimeout(); // 设置超时时间
clearTimeout(obj) ;
8、例子
8.1 跑马灯
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>欢迎大王莅临指导 </title>
<script type='text/javascript'>
function Go(){
var content = document.title;
var firstChar = content.charAt(0)
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</head>
<body>
</body>
</html>
8.2 搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<script type="text/javascript">
function Enter(){
var id= document.getElementById("tip")
id.className = 'black';
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id= document.getElementById("tip")
var val = id.value;
if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
</body>
</html>
