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

本文详细介绍了DOM中的三种类型：comment、DocumentFragment和attr。comment类型包括其nodeType、nodeName和nodeValue等特性；DocumentFragment是不属于文档树的部分，用于临时存储节点；attr类型代表元素的特性，具有name、value和specified等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.youkuaiyun.com/qq_37674616/article/details/82433026

comment类型

特性

nodeType的值为8

nodeName的值为 "#comment"

nodeValue的值是注释的内容

parentNode 可能是Document或Element

没有子节点

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

DocumentFragment类型

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

特性

nodeType的值为11

nodeName的值 '#document-fragement'

nodeValue的值为null

parentNode的值为null

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

            <ul id="list"></ul>
    <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

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

            <div id="div1"></div>
            <script>
                var div1=document.getelementById('div1');
                var attr=div1.attributes;
                console.log(attr);//NamedNodeMap {0: id, id: id, length: 1}
                console.log(attr[0].name);//id
                console.log(attr[0].value);//div1
            </script>