dom --comment类型、文档碎片类型、attr类型的汇总

目录

comment类型

特性

documentfragment类型

特性

attr类型

特性

属性

name

value

specified

---

comment类型

特性

nodetype的值为8

nodename的值为 "#comment"

nodevalue的值是注释的内容

parentnode 可能是document或element

没有子节点

虽然comment类型与text类型都继承自characterdata 但，一般我们不会对注释做创建和访问。

documentfragment类型

文档片段不属于文档树的一部分。

特性

nodetype的值为11

nodename的值 '#document-fragement'

nodevalue的值为null

parentnode的值为null

**：如果我们将文档中的节点加入到文档片段中,那么该节点就会被从文档树中移除,因此中再也看不到该节点。除非我们将文档片段在加入到文档中(其实是将片段中的节点加入到文档节点中)
示例

<script> var ul=document.getelementbyid('list'); var fragment=document.createdocumentfragment(); var data=["li1","li2","li3"]; data.foreach( function(element, index) { // 遍历数组 将每一个数组值加入到到li元素中 // 再将li 加入到文档片段中 var li=document.createelement('li'); li.innerhtml=element; fragment.appendchild(li); }); //将文档片段加入到ul中 ul.appendchild(fragment); </script>

attr类型

元素的特性在dom中以attr类型来表示。特性就是存在于元素的attributes属性中的节点。

特性

nodetype的值为2

nodename的值为特性的名字

nodevalue的值为特性的值

parentnode的值为null

属性

name

特性名称,与nodename值相同

value

特性的值,与nodevalue值相同

specified

是一个布尔值,用以区别特性是在代码中指定
示例

<script> var p1=document.getelementbyid('p1'); var attr=p1.attributes; console.log(attr);//namednodemap{0: id, id: id, length: 1} console.log(attr[0].name);//id console.log(attr[0].value);//p1 </script>