简介
DOM（Document Object Model）：文档对象模型。就是将 XML（或者 HTML）内的节点定义成基本统一的对象数据可以供程序语言（如 javaScript）控制的技术规范。
程序语言不是直接访问 XML（或者 HTML）文档的，而是先由 XML（或者 HTML）分析器对文档进行分析，然后，应用程序通过 XML（或者 HTML）分析器所提供的 DOM 接口或 SAX 接口对分析结果进行操作，从而间接地实现了对 XML（或者 HTML）文档的访问。
常用的一些属性和方法
访问节点
.nodeType ：值为 1、3 、8 时分别表示 元素节点、文本节点、注释节点。（属性不是节点）
.nodeName ：元素节点的 nodeName 为元素标签名的大写。文本节点为#text，注释节点为#comment
.nodeValue ：元素节点没有 nodeValue，文本节点和注释节点的值都为其内容。
.childNodes ：元素的子节点集合（包括空白文本，注释，换行）。常要配合 nodeType 使用。
.children ：元素的子元素。常用于替代 .childNodes ，（但是在ie678还会包含注释节点）。
相关的一些属性：parentNode，childNodes，firstChild，firstElementChild，lastChild，lastElementChild，nextSibling，nextElementSibling，previousSibling，previousElementSibling
由于一般操作 DOM 的时候，都是对元素进行操作。所以一般使用 children，parentNode，firstElementChild，lastElementChild，nextElementSibling，previousElementSibling
增删节点
一般而言有两种方法创建元素。
方法一：innerHTML
- 用 innerHTML 会先把元素清空，然后再插入新的节点。
- 每次添加元素，都会造成浏览器回流，性能损失。因此，要选用一个临时变量来保存创建的节点，最后一次性添加。
方法二：document.createElement()
- 这个方法与 innerHTML 相似，不过不会清除原有的元素。而是结合 appendChild() 及 insertBefore() 使用。
- 每次添加元素，都会造成浏览器回流，性能损失。不过也有一个专门的方法应对这种情况。就是创建一个**document.createDocumentFragment() **临时节点，将新建的加点加进去，最后再把这个临时节点加入到目标。这个方法创建的临时节点，不是文档树的一部分，它保存在内存中，所以不会造成回流。
注：关于重绘（repaint）与回流（reflow）
repaint，就是浏览器得知元素产生了不影响排版的情况下后对这个元素进行重新绘制的过程。例如我们改变了元素的颜色，加个下划线等。
reflow, 浏览器得知元素产生了对文档树排版有影响的样式变化，对所有受影响的 dom 节点进行重新排版工作
删除、替换元素/节点
removeChild();
replaceChild(newnode, oldnode);