12揭秘前端 DOM！childNodes与children属性全解析及兼容性秘籍-CSDN博客

本文链接：https://blog.csdn.net/chinayun_6401/article/details/148114125

childNodes属性：获取节点子节点集合的关键

【兼容性封装】childNodes属性的优化策略

children属性：获取元素子节点集合的便捷方式

【兼容性封装】children属性的优化策略

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

12揭秘前端 DOM！childNodes与children属性全解析及兼容性秘籍

childNodes属性：获取节点子节点集合的关键

在HTML DOM中，childNodes属性是用于获取指定元素节点的所有子节点集合的重要工具。通过该属性，开发者可以访问元素的直接子节点，包括元素节点、文本节点和注释节点等。

语法：

element(元素对象).childNodes

特点：

浏览器

返回值

高版本浏览器（如谷歌、火狐、ie9及以上版本）

元素节点：标签

文本节点：文本内容、空格、换行等

注释节点：注释内容

ie低版本浏览器（如：ie6、7、8）

元素节点：标签

文本节点：文本内容（不包括空格、换行）

注释节点：注释内容

示例代码如下：

<body>
    <div id="box">
        box
        <h2>h2</h2>
        <ul>
            ul
            <li>li</li>
            <li>li</li>
            <li>li</li>
            <!-- 注释 -->
        </ul>
        <!-- 注释 -->
        <h3>h3</h3>
    </div>
    <script>
        var box=document.getElementById('box');
        var childs=box.childNodes;
        console.log(childs);//NodeList(9)[text, h2, text, ul, text, comment, text, h3, text]
        for(var i=0;i<childs.length;i++){