js中的children实时获取子元素

古城微笑少年丶 2022-05-23 11:27 267阅读 0赞

先看下面一个小例子的结果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul,li{list-style:none;}
        </style>
    </head>
    <body>
    <div id="wrap">
        <ul id="list"></ul>
    </div>
    <script>
        var oList = document.querySelector('#list');
        var lis1 = oList.querySelectorAll('li');
        var lis2 = oList.children;
        console.log(lis1.length);//0
        console.log(lis2.length);//0
        function createLi(){
            for(var i=0; i<10; i++){
                var li = document.createElement('li');
                li.innerHTML = i;
                oList.appendChild(li);
            }
        }
        createLi();
        console.log(lis1.length);//0
        console.log(lis2.length);//10
    </script>
    </body>
    </html>

从上面的结果我们发现，我们发现同样是一开始就获取了ul的子列表，但是通过.querySelectorAll获取的子列表，在创建列表前和创建列表后，长度都为0，而通过.children方法获取的字列表，在列表创建前，长度为0，而创建之后，长度为10，为什么呢？

使用.children获取的是元素对象是一个实时更新的列表 可以看做一个数组对象 而使用querySelectorAll获取的是NodeList 与其他方式获取的NodeList不同 它不是节点集合 而是元素集合 并且是静态的 不会实时更新 相当于克隆了一个新数组

所以，我们在使用的时候要注意了哦，如果想要实时获取列表的变化，可以使用.children，反之，则使用.querySelectorAll（当然也包括getElementsByClassName和getElementsByTagNama）

childNodes也和children一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）