1.背景介绍

什么是DOM？

DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。

DOM的组成

对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。

DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。

核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。

HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。

DOM树

要严格区分XML文档树中的根节点与根元素节点：文档（根节点）和根元素节点是两回事。

根节点代表整个文档，是我们解析XML文档的入口，通过它获取到Document对象；

根元素节点代表XML文档的根元素，必须要在获得Document对象之后才能一层一层地去访问它的元素。

2.知识剖析

DOM的四个基本接口

在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。

Document:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。

Node:Node接口是其他大多数接口的父类。 在DOM树中，Node接口代表了树中的一个节点。

NodeList:NodeList接口是一个节点的集合，它包含了某个节点中的所有子节点。　　它提供了对节点集合的抽象定义，并不包含如何实现这个节点集的定义。　　NodeList用于表示有顺序关系的一组节点，比如某个节点的子节点序列。　　在DOM中，NodeList的对象是live的，对文档的改变，会直接反映到相关的NodeList对象中。

NamedNodeMap:NamedNodeMap接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系，从而利用节点名可以直接访问特定的节点，这个接口主要用在属性节点的表示上。　　尽管NamedNodeMap所包含的节点可以通过索引来进行访问，但是这只是提供了一种枚举方法，NamedNodeMap所包含的节点集中节点是无序的。　　与NodeList相同，在DOM中，NamedNodeMap对象也是live的。

常见的DOM操作

1.查找节点

document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合

document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素

document.documentElement; 获取页面中的HTML标签

document.body; 获取页面中的BODY标签

document.all['']; 获取页面中的所有元素节点的对象集合型

2.创建节点

document.createElement('元素名'); 创建新的元素节点

document.createAttribute('属性名'); 创建新的属性节点

document.createTextNode('文本内容'); 创建新的文本节点

document.createComment('注释节点'); 创建新的注释节点

document.createDocumentFragment( ); 创建文档片段节点

3.删除节点

parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点

element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值

element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性

4.修改节点

parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点

element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的

element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的

5.插入节点

parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );给元素增加属性节点

element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值

6.设置样式

ele.style.styleName = styleValue;设置ele元素的CSS样式

4.解决方案

DOM 和 HTML是一回事吗？

就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。

但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JavaScript什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。

书写细节

只有查找ID时element不加s ，对新人来说要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在

getElementById

getElementsByClassName

7.参考文献

参考一:JavaScript高级程序设计

参考二:HTML DOM Document 对象