JS-DOM常用节点类型

最新推荐文章于 2022-07-21 20:45:36 发布

书院二层楼

最新推荐文章于 2022-07-21 20:45:36 发布

阅读量254

点赞数 1

分类专栏： JS 文章标签：元素节点文本节点注释节点文档节点文档声明

本文链接：https://blog.youkuaiyun.com/caoxinjian423/article/details/113781714

版权

JS 专栏收录该内容

61 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM常用节点类型</title>
</head>
<body>
    <ul id="list">
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <!-- 我是注释 -->
        <li>第5个li</li>
        <li>
            <span>span01</span>
            <span>span02</span>
        </li>
    </ul>   

    <script>
        {
            let list = document.querySelector("#list");
            // 节点类型
            console.log(document.nodeName);    //打印：document
            console.log(document.nodeType);    //打印：9     （文档节点）
            document.childNodes.forEach(item=>{
                console.log(item,item.nodeType,item.nodeName); // 节点类型
                // 10 文档声明
                // 1 元素节点（标签名称）
            });
            list.childNodes.forEach(item=>{
                console.log(item,item.nodeType,item.nodeName);
                // 3 文本节点
                // 8 "#comment" 注释节点
            });

            /*
            节点类型
                1 元素节点 （标签名称）
                3 文本节点  (#text) 
                8 注释节点  (#comment)
                9 文档节点  (#document)
                10 文档声明 (html)
            */
        }
    </script>
</body>
</html>