getElementById和querySelector方法的区别

蚁族的奋斗1

于 2020-02-29 17:47:50 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/github_39319000/article/details/104578361

js 专栏收录该内容

122 篇文章

订阅专栏

本文探讨了JavaScript中动态集合与静态集合的概念，通过两个示例对比了getElementBy与querySelector在处理DOM元素时的不同表现。前者在动态修改集合时会导致死循环，而后者则能避免这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //无法打印，前面for循环变成了死循环
 
//demo2
var ul = document.querySelectorAll('ul')[0],
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

区别在于第一段代码造成了死循环，getElementBy获取的时候动态集合，当往节点里面追加的时候，length又变长了，无穷无尽

querySelector 是个静态的，只是获取当前状态的节点