一、DOM简介
1.DOM，全程Document Object Model，文档对象模型。
2.JavaScript中通过DOM来对HTML文档进行操作。
3.文档表示整个HTML网页文档。
4.对象表示将网页中的每一个部分都转换为了一个对象。
5.使用模型来表示对象之间的关系，这样方便获取对象。
6.HTML DOM 模型被构造为对象的树。
二、文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取一行运行一行。
onload事件会在整个页面加载完了之后才会触发。
eg: window.onload = function(){
...
};三、查找HTML元素
1.通过id
--getElementById(); 方法
eg : var item=document.getElementById("item");注意：
**如果有多个id存在只获取第一个，也就是最先出现的哪一个。一般情况也不会出现同一个id在页面上出现两次
**在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。而且在IE6、7中不区分元素的大小写。
2.通过标签名
--getElementsByTagName(); 方法
eg: 获得所有div元素
var d = document.getElementsByTagName("div");注意：
**返回值是一个类数组，没有找到返回空数组。
**document和元素都可以使用这个方法。
3.通过name属性
--getElementsByName(); 方法
eg： var btnName = document.getElementsByName("sub");注意：
**返回值是一个类数组，没有找到返回空数组。
**在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。
4.通过类名
--getElementsByClassName();
注意：
**返回值是一个类数组，没有找到返回空数组。
**IE8以及一起拿的版本不兼容。
5.获取HTML的方法
--document.documentElement
6.获取body的方法
--document.body
7.通过选择器获取一个元素
--querySelector();
eg：
获取文档中 id="demo" 的元素：
var demo = document.querySelector("#demo");获取文档中class 为 test1 中所有的 div
var test1 = document.querySelector(".test1 div");8.通过选择器获取一组元素
--querySelectAll();
注意：和querySelector 一样，不兼容IE7
9.获取所有元素
--all 相当于 document.getElementsByTagName("*");
eg: var all = document.all;三、dom增删改
1.创建元素节点
--document.createElement();
其需要一个标签名作为参数，将会根据该标签名创建元素节点对象。并将创建好的对象作为返回值返回。
eg: var li = document.createElement("li");
2.创建文本节点
--document.createTextNode();
其需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新节点返回。
eg：var text = document.createTextNode("文本");3.1向父节点中添加一个新的子节点
--父元素.appendChild(子节点);
eg:
li.appendChild(text);3.2在指定子节点前面插入新的子节点。
--父节点.insertBefore(新节点,旧节点);
3.3指定的子节点替换已有的子节点
--父节点.replaceChild(新节点，旧节点);
3.4删除节点
--父节点.removeChild(子节点);
示例：
四. 改变HTML
1.改变HTML输出流
-- document.write() 可用于直接向 HTML 输出流写内容
eg：document.write(Date());注意：在文档加载之后使用 document.write()。会覆盖该文档。
2.改变HTML内容
--innerHTML 属性 //与dom方式结合使用。
eg：document.getElementById("p1").innerHTML="新内容";3.改变HTML属性
-- document.getElementById(“id”).属性=新值;
eg: document.getElementById("image").src="newTest.jpg";4.改变CSS样式
-- document.getElementById(“id”).style.属性=新样式;
--如果CSS样式名中含有 - ，这个在js中不合法，要去掉，然后把后面的字母大写。
eg: document.getElementById("p2").style.color="blue";