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

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

目录

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

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

            <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>

猜你喜欢

转载自blog.csdn.net/qq_37674616/article/details/82433026