一、DOM简介
什么是DOM？简单地说，DOM是是针对HTML和XML文档的一个API，一套对文档的内容进行抽象和概念化的方法。
学习过ORM的同学可能知道ORM是将数据库中的表映射到类，建立一个表和类的映射模型，类属性为表字段，类实例为表记录，通过操作类和类的实例来对数据库进行增删改查。
DOM就是另一种模型，不同的是DOM是将一个HTML或XML文档映射到一个家谱树，文档中的内容划分为许多类型的节点，这些节点按照原本的层次组成一颗家谱树，通过对家谱树节点的操作来达到对整个文档的增删改查。
也就是说，DOM描绘了一个层次化的节点树，可以使用JS来操作这个节点树，进而改变底层文档的外观和结构。
另外DOM也分为几种不同的等级，这主要是根据每一级推出的时间及主要功能来分的。最开始的DOM（DOM0）在每个浏览器的实现都有很大的区别，大大增加了开发的难度，为此，W3C结合各家优点，推出了一个标准化的DOM（DOM1），主要定义了HTML和XML文档的底层结构。之后推出的DOM2和DOM3则在这个结构的基础上引入了更多的交互能力，其目的在于扩展DOM API，以满足操作XML的需求，同时提供更好的错误处理及特性检测，这些功能的关键是对命名空间的支持，我们在之后会详细讲解。
二、DOM节点树
说到DOM，就必须明白DOM将文档构建节点树的规则，HTML大家都熟悉，那就先来看下DOM节点树的组成。
DOM节点树由节点构成，而节点也是对象，有以下几种类型：
1. 最基本的节点是Node，用于抽象的表示文档中一个独立的部分；所有其他类型都继承自Node。
2. Document类型表示整个文档，是一组分层节点的根节点。在JS中，document对象使Document的一个实例。
3. Element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。
4. 另外还有一些节点类型，分别表示属性、文本内容、注释、文档类型、CDATA区域和文档片段。
其中我们最应该关心的的是Element节点，这种节点与HTML中的标签一一对应，此外，文本节点与属性节点对我们操控文档也有着很大帮助。
刚刚提到节点也是对象，这就说明了几个问题：
1.每种节点都有其各自的属性和方法。
2.节点之间除了家族关系（层次关系）外，还可能有继承关系（这主要说的是抽象节点Node与其他类型的关系），所以会有继承下来的共有属性与方法。
（一）Node类型
Node节点作为所有节点类型的超类，定义了各类节点共享着的的相同属性和方法：
1.每个节点都有的属性：
（1）NodeType属性：表明节点类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一。
| 类型 | nodeType常数值 | 描述 |
|---|---|---|
| Node.ELEMENT_NODE | 1 | 元素节点 |
| Node.ATTRIBUTE_NODE | 2 | 属性节点 |
| Node.TEXT_NODE | 3 | 文本节点 |
| Node.CDATA_SECTION_NODE | 4 | 字符数据节点（文本不会被解析器解析） |
| Node.ENTITY_REFERENCE_NODE | 5 | 实体引用节点 |
| Node.ENTITY_NODE | 6 | 实体节点 |
| Node.PROCESSING_INSTRUCTION_NODE | 7 | 处理指令节点 |
| Node.COMMENT_NODE | 8 | 注释节点 |
| Node.DOCUMENT_NODE | 9 | 文档节点（DOM树的根节点） |
| Node.DOCUMENT_TYPE_NODE | 10 | 向为文档定义的实体提供接口 |
| Node.DOCUMENT_FRAGMENT_NODE | 11 | 表示邻接节点和它们的子树。 |
| Node.NOTATION_NODE | 12 | 代表一个符号在DTD中的声明 |
（2）childNodes属性：指向一个NodeList对象（包含一组同胞节点）。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList的独特之处在于，他实际上是基于DOM结构动态执行查询的结果，这种特性的好处是DOM结构的变化能够自动反映在NodeList对象中，但也会产生一些问题，之后我们会讲到，主要是内存占用方面。另外还有一种HTMLCollection对象，和NodeList很类似，主要区别在于NodeList保存所有类型的节点，HTMLCollection只保存Element类型的节点，以及多一个namedItem方法（传入name属性返回节点）。
（3）parentNode、previousSibling、nextSibling属性：分别指向父节点、前一个同胞节点、后一个同胞节点。
2.每个节点都有的方法：
（1）appendChild()：用于向childNodes列表的末尾添加一个节点，返回新增的节点。
（2）insertBefore()：定位插入子节点，返回新增的节点。
（3）replaceChild()：替换节点，返回被替换的节点。技术上将，这个是将旧节点的所有关系指针复制到新节点上，同时删除自身关系，这样旧节点就成了一个孤儿节点，在文档中没有了自己的位置。
（4）removeChild()：移除节点。也是通过删除关系指针的方式。
（二）Document类型
未完待续……