dom - 12 种 node 类型

最新推荐文章于 2024-08-27 15:48:31 发布

笑望灬星辰

最新推荐文章于 2024-08-27 15:48:31 发布

阅读量742

点赞数 1

文章标签： html5 javascript 前端 dom html

本文链接：https://blog.csdn.net/hu1628299958/article/details/109502400

版权

dom - 12 种节点类型

元素节点	Node.ELEMENT_NODE(1)
属性节点	Node.ATTRIBUTE_NODE(2)
文本节点	Node.TEXT_NODE(3)
CDATA节点	Node.CDATA_SECTION_NODE(4)
实体引用名称节点	Node.ENTRY_REFERENCE_NODE(5)
实体名称节点	Node.ENTITY_NODE(6)
处理指令节点	Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点	Node.COMMENT_NODE(8)
文档节点	Node.DOCUMENT_NODE(9)
文档类型节点	Node.DOCUMENT_TYPE_NODE(10)
文档片段节点	Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点	Node.NOTATION_NODE(12)

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
</head>
<body><div  id="id1" onclick="getdiv(event)"><!-- 我是第1个注释 -->hujiajia<!-- 我是第2个注释 --></div>
    <script>
        // 用的是谷歌浏览器进行测试  后续补上其他主流浏览器的差异性
        function getdiv(event){
            console.log(event)
            /*
                本文简要描述12个节点类型， 后续会针对单个节点做更详细的分析
            */
            // 元素节点 element 1
            console.log(event.toElement.nodeName);  //  DIV
            console.log(event.toElement.nodeType);  //  1
            console.log(event.toElement.nodeValue); //  null

            // 属性节点 attributes 2
            console.log(event.toElement.attributes); // 返回类数组  先后顺序与元素标签上的顺序一致
            console.log(event.toElement.attributes[0].nodeName);    // id
            console.log(event.toElement.attributes[0].nodeType);    // 2
            console.log(event.toElement.attributes[0].nodeValue);   // id1
            console.log(event.toElement.attributes[1].nodeName);    // onclick
            console.log(event.toElement.attributes[1].nodeType);    // 2
            console.log(event.toElement.attributes[1].nodeValue);   // getdiv(event)

            // 文本节点 childNodes 3 顺序与元素内容的一致  直接内容则为 text 注释为comment 其他标签对应标签名
            console.log(event.toElement.childNodes[1].nodeName);  // #text
            console.log(event.toElement.childNodes[1].nodeType);  // 3
            console.log(event.toElement.childNodes[1].nodeValue); // hujiajia

            // 搞过 c 开发的 后端 或者安卓等 可能比较熟悉 xml  本人不是很熟  
            // 后续看看有没有时间 可以研究研究  毕竟现在前端几乎不用到xml
            // CDATA节点 4  属于xml的范畴  这里不做简述

            // 实体引用名称节点 5 属于xml的范畴  这里不做简述

            // 实体名称节点 6 属于xml的范畴  这里不做简述

            // 处理指令节点 7 属于xml的范畴  这里不做简述

            // 注释节点 Comment 8
            console.log("%cComment:", "color:red")
            console.log(event.toElement.childNodes);  // 返回类数组  顺序与元素内容的一致  直接内容则为 text 注释为comment 其他标签对应标签名
            console.log(event.toElement.childNodes[0].nodeName);  // #comment
            console.log(event.toElement.childNodes[0].nodeType);  // 8
            console.log(event.toElement.childNodes[0].nodeValue);  // 我是第1个注释

            // 文档节点 Document 9
            console.log("%cDocument:", "color:#787878")
            console.log(event.toElement.ownerDocument.nodeName);  // #document
            console.log(event.toElement.ownerDocument.nodeType);  // 9
            console.log(event.toElement.ownerDocument.nodeValue); // null

            // 文档类型节点 DocumentType 10
            console.log("%cDocumentType:", "color:#347ad0")
            console.log(event.toElement.ownerDocument.firstChild.nodeName);  // html
            console.log(event.toElement.ownerDocument.firstChild.nodeType);  // 10
            console.log(event.toElement.ownerDocument.firstChild.nodeValue); // null

            // 文档片段节点 11
            // 文档片段节点DocumentFragment在文档中没有对应的标记，是一种轻量级的文档，
            // 可以包含和控制节点，但不会像完整的文档那样占用额外的资源。该节点的节点类型nodeType的值为11，
            // 节点名称nodeName的值为'#document-fragment'，nodeValue的值为null

            // DTD节点 12
            // DTD声明节点notation代表DTD中声明的符号。
            // 该节点的节点类型nodeType的值为12，节点名称nodeName的值为符号名称，nodeValue的值为null

        }
    </script>
</body>
</html>