一、DOM简介
一个完整的JavaScript实现包含三个部分：ECMAScript、DOM、BOM；
1、那什么是DOM呢？
DOM，全称：Document Object Model（文档对象模型）；
JS中通过DOM来对HTML文档进行操作，从而操作Web页面；
文档—表示的就是整个HTML网页文档；
对象—表示将网页中的每一个部分都转换为一个对象；
模型—使用模型来表示对象之间的关系，这样方便我们获取对象；
2、HTML树
3、节点
节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分的可以称为一个节点。比如：HTML标签，属性，文本……都是一个节点；虽然都为节点，但他们的具体类型是不同的。
1）元素节点 ：HTML文档中的标签；
2）属性节点 ：元素的属性；
3）文本节点 ：标签中的文本内容；
4）文档节点 ：整个HTML文档；
4、获取元素节点
通过document对象调用
1）getElementById()：通过id属性获取一个元素节点对象；
2）getElementsByTagName()：通过标签名获取一组元素节点对象；
3）getElementsByName() ：通过name属性获取一组元素节点对象；
5、获取元素节点的子节点
通过具体的元素节点调用
1）getElementsByTagName()：----方法，返回当前节点的指定标签名后代节点；
2）childNodes：----属性，表示当前节点的所以子节点；
-----childNodes会获取包括文本节点在内的全部节点，根据DOM标准标签中的空白也会当作文本节点，在IE8以下的浏览器中，标签间空白不会当作文本节点；
children属性可以获取当前元素的所以子元素（即标签）；
3）firstChild----属性，表示当前节点的第一个子节点；（也包括空白文本）；
-----firstElementChild可以获取当前节点的第一个子元素（不包括空白节点）
但IE8及以下不行，所以如果要兼容IE8及以下不建议使用
4）lastChild----属性，表示当前节点的最后一个子节点；
6、获取父节点和兄弟节点
通过具体的节点调用
1）parentNode----属性，表示当前节点的父节点；
2）previousSibling----属性，表示当前节点的前一个兄弟节点；
3）nextSibling----属性，表示当前节点的后一个兄弟节点；
7、DOM的增删改
1）createElement（）：创建一个元素节点，并将创建好的元素节点返回；需要一个标签名作为参数；
2）createTextNode() ： 创建一个文本节点
3）appendChild（）：向父节点中添加一个子节点；
4）insertBefore（）： 在指定子节点前面插入一个新节点；
语法：父节点.insertBefore(新的子节点，指定节点)；
5）replaceChild()：用新子节点替换指定子节点；
语法：父节点.replaceChild(新节点，旧节点)；
6）removeChild（）：删除指定子节点；
语法：父节点.removeChild(子节点)-----“他杀”；有时情况复杂，难找出父节点时，可用：子节点.parentNode.removeChild(子节点)-----“自杀”；
8、DOM的其他方法
1）获取body：在document中有一个body属性，它保存的是body的引用；
语法：document.body；
2) document.documentElement : 保存的是html根标签;
3) document.all ：代表页面中所以的元素；