深入理解dom节点

元素节点

1 .元素节点element对应网页的html标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null.
2 .父节点指向包含该元素节点的element或文档节点。
3 .访问元素的标签名可以使用nodeName或者tagName.
4 .元素可以有任意数目的子节点和后代节点。元素的childNodes属性包含了他的所有子节点。这些子节点可以是元素，文本，注释，处理指令节点等。

特性操作

1 .hasAttribute()
2 .getAttribute()
3 .setAttribute()
4 .removeAttribute()

attributes属性

1 .是唯一一个使用attribute属性的dom节点类型。attribute包含一个namedNodeMap，与NodeLIst类似，也是一个动态的集合。
2 .方法
3 .getNameItem(name)
4 .removeNameItem(name)
5 .setNameItem(node):向列表中添加节点
6 .遍历：attributes主要用于特性遍历。再设计dom结构序列化为html字符串时，需要涉及到遍历元素特性。

属性节点

1 .属性节点attribute对应网页中html标签的属性，他只存在与元素的attribute中，并不是dom文档树的一部分。属性节点的nodeType值是2，节点名称是属性名，nodeValue值是属性值
2 .父节点parentNode是null.
3 .关于属性节点是否存在子节点，各个浏览器表现不一致。
4 .方法
5 .createAttribute()
6 .setAttributeNode()
7 .getAttributeNode()
8 .removeAttributeNode()
9 .虽然特性节点排行老二，但是其属性和方法并不常用，元素节点有对应的可替代的方法。

文本节点

1 .文本节点text代表网页中的html标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是‘#text’,nodeValue值是标签内容值。
2 .其父节点parentNode指向包含该文本节点的元素节点，文本节点没有子节点
3 .空白文本节点：ie8浏览器不能识别空白文本节点，而其他的浏览器会识别空白文本节点

属性

1 .data:文本节点的data属性和nodeValue属性相同
2 .wholeText:将当前的Text节点和比邻的Text节点作为一个整体返回
3 .length:文本节点的length属性保存着节点字符的数目

方法

1 .createTextNode()
2 .normalize()合并相邻的文本节点。这个方法在文本节点的父节点-元素节点上调用。
3 .splitText()将一个文本节点分成两个文本节点，按照指定的位置分割nodeVaule的值。
4 .元素的文本可以看成是字符串，也可以看成是节点，除了字符串操作方法，也可以使用正则或者文本节点等方法。

CDATA节点

1 .针对xml的文档，只出现在xml文档中，表示的是CDATA区域。

注释节点

1 .comment表示网页中的html注释，注释节点的节点类型为8，节点名称值为‘#comment’,nodeValue值为注释的内容
2 .父节点可以使document，也可以是element,注释节点没有子节点。
3 .所有浏览器都识别不出来位于后面的注释

属性和方法

1 .createComment()
2 .

注意IE8-浏览器将标签名为‘!’的元素视为注释节点，所以文档声明也被看做注释节点

文档节点

1 .文档节点document表示html文档，也称为根节点。指向document对象。文档节点的nodeType的值为9,节点名称值为‘#document’，nodeValue值为null.
2 .父节点是document,文档类型节点没有子节点

文档片段节点

1 .DOcumentFragment在文档中是没有对应的标记的，是一种轻量的文档，可以包含和控制节点，但不会像完整的文档那样，该节点的节点类型为11，节点名称为‘#document-fragment’,nodeValu:null
2 .在所有的节点类型中，只有文档片段节点在文档中没有对应的标记。dom规定文档片段是一种轻量级的文档，可以包含和控制节点，但是不会向完整的文档那样占用额外的资源。

属性和方法

1 .document.createDocumentFragment()方法。文档片段继承了node的所有方法，通常用于执行那些针对文档的dom操作。
2 .使用方法：如果将文档中的节点添加到文档片段中，就会从文档树种移除该节点。把所有的要构造的节点都放在文档片段中执行，这样可以不影响文档树，也就不会造成页面渲染，当节点都构造完成之后，在将文档片段对象添加到网页中，这时所有的节点一次渲染出来，减少浏览器的负担，提高页面渲染速度。
3 .值得注意的是，当使用ie浏览器的时候，使用文档片段的性能反而不会更好。

documentType节点

1 .包含着与文档所有的相关的doctype信息
2 .nodeType:10,nodeName:doctype的名称,nodeValue:null.
3 .支持documentType类型的节点的浏览器会把documentType节点保存在document.doctype中，他有三个属性
4 .name:表示文档类型的名称，
5 .ebties,notations都是NameNodeMap对象，一个描述实体，一个描述符号。
6 .documentType类型的节点在web浏览器中并不常用，也不能动态创建，只是能由浏览器在解析文档的时候创建

区分元素特性attribute和对象属性property

1 .元素特性是指html元素标签的特性
2 .id,class,key:这个是自定义特性
3 .对象属性是元素的节点的属性

4 .id,title,b都是属性，其中b叫做自定义属性。

共有

1 .id,title等既是属性也是特性，修改属性，特性也会发生改变，修改特性，属性也会发生改变。
2 .class和for这两个元素是例外，他们都是保留字，所以在对象属性中，class-className,for-htmlFor。
3 .与普通的元素特性不同，通过style实现的校本化css机制和听过onclick等实现的事件处理机制是dom的两大功能，他们被dom实现为对象，而不是仅仅的普通的字符串。
4 .ie7浏览器对元素特性和对象属性有所混淆。
5 .自定义特性和自定义属性非常有用，h5新增的数据集属性dataset建立了两者的联系。