理解HTML DOM

DOM（Document Object Model）全称文档对象模型。DOM其实是JavaScript操作网页的一套API接口，定义了访问和操作HTML文档的标准。定义了所有HTML元素的对象和属性，以及访问他们的方法。浏览器会根据DOM模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构，所以它的作用是将网页转为一个个节点对象，从而可以用脚本对其进行各种操作获取，修改，添加或删除HTML元素。

1.DOM节点

文档对象是由不同类型的节点对象组成的，所以要操作文档对象，我们得知道有哪些节点对象。节点对象都有一个nodeType属性，通常是由一个数值常量表示

（1）常见的节点对象：

ELEMENT_NODE(1),元素节点对象
ATTRIBUTE_NODE(2),属性节点对象
TEXT_NODE(3),文本节点对象
COMMENT_NODE(8),注释节点对象
DOCUMENT_NODE(9),文档节点对象
DOCUMENT_TYPE_NODE(10),文档类型节点对象
DOCUMENT_FRAGMENT_NODE(11),文档片段节点对象

（2）节点对象之间的关系

整个文档对象，是由不同的节点对象组成，这些节点之间都存在在关系，常见的关系有：

parentNode,父节点
previousSibling,前一个兄弟节点
nextSibling,后一个兄弟节点
firstChild,第一个子节点
lastChild,最后一个字节点
childNodes，子节点集合
ownerDocument, 顶层文档对象，即document对象。
parentElement,返回当前节点的父Element节点

（3）操作节点对象的方法

appendChild(node);向childNodes列表的末尾添加一个节点
insertBefore(newnode,position);往childNodes列表中的某个固定的位置插入一个节点，要是参照节点为null，默认加在末尾
replaceChild(newnode,position)替换某个节点
removeChild(node);删除某个节点
cloneNode(true/false);克隆对象
contains(),接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。
isEqualNode(),
normalize()， 清理当前节点内部的所有Text节点
hasChildNodes()