JavaScript 中 DOM 操作获取子节点集合的两种属性

最新推荐文章于 2024-09-08 21:17:37 发布

C20001206

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量97

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 html

本文链接：https://blog.csdn.net/C20001206/article/details/131520892

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.childNodes 属性

childNodes属性返回一个类似数组的对象(NodeList集合)，成员包括当前节点的所有子节点

注意:包括空格和回车

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
        <div class="child">nihao</div>
    </div>
    <div id="two"></div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        const two = document.querySelector('#two')
        // childNodes
        // childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
        // 注意:包括空格和回车
        console.log(one.childNodes)  //NodeList(5) [text, div.child, text, div.child, text]
        // 其中第一个text为:  "\n        hello world\n        "
        // 其中第三个text为: "\n        "
        // 最后一个text为:  "\n    "

    </script>
</body>

2.children属性

children 属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有元素子节点

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
        <div class="child">nihao</div>
    </div>
    <div id="two"></div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        const two = document.querySelector('#two')
        
        // children
        // children 属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有 元素子节点
        console.log(one.children)  // HTMLCollection(2) [div.child, div.child]



    </script>
</body>