js中的children实时获取子元素

news/2024/7/19 13:29:05 标签: js, children

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

<!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一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）