JavaScript children和childNodes

最新推荐文章于 2024-05-13 13:37:50 发布

七月的烂番茄

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Black_Tmt/article/details/77488632

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

children属性，它返回的是 HTMLCollections（子元素集合）。

 <div id="box">
             <ul>
                 <li>1</li>
             </ul>
             <ul>
                 <li>2</li>
             </ul>
             <ul>
                 <li>3</li>
             </ul>
             <ul>
                 <li>4</li>
             </ul>
         </div>
         <script type="text/javascript">
                var box=document.getElementById("box");
                console.log("box.children的长度="+box.children.length);
                console.log(box.children);
        </script>

box里第一级子元素的长度

IE6-IE8都支持children属性，但返回的是元素节点和注释节点，IE9以上都返回的只是元素节点。
这里写图片描述

childNodes属性，它返回的是 NodeList（子节点集合）。

<div id="box">
             <ul>
                 <li>1</li>
             </ul>
             <ul>
                 <li>2</li>
             </ul>
             <ul>
                 <li>3</li>
             </ul>
             <ul>
                 <li>4</li>
             </ul>
         </div>
         <script type="text/javascript">
                var box=document.getElementById("box");
                console.log("box.childNodes的长度="+box.childNodes.length);
                console.log(box.childNodes);
        </script>