元素节点
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 .所有浏览器都识别不出来位于</html>后面的注释
属性和方法
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 .对象属性是元素的节点的属性
<div id='test'></div>
<script>
test.id='id2';test.title='test2',test.key='value'
</script>
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建立了两者的联系。