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一样是实时获取元素的字列表(但两者还是有区别的,这里不再详细叙说,关于两者的区别网上有很多啦)
---------------------
原文:https://blog.csdn.net/lhjuejiang/article/details/80615054

posted @   笠航  阅读(4580)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示