getElementBy系列和querySelector系列的区别
querySelector和querySelectorAll的用法和getElementBy大致一样，获取的时候带上符号，getElementBy获取的是元素的动态集合，querySelector获取的是元素的静态集合。
但是需要注意：getElementBy系列和querySelector系列的区别
比如，我们写一个for循环，每次获取li标签的时候，ul生成一个li子元素
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
var ul = document.getElementById('ul');
var li = document.getElementsByTagName('li');
for(var i = 0;i < li.length; i++) {
ul.appendChild(document.createElement('li'))
};
console.log(li.length);
// 陷入死循环
</script>用i < li.length来进行判断时，会导致浏览器死循环，因为循环一次的时候，浏览器又重新获取li标签数组，每调用一次就会重新对文档进行查询，就会进入死循环
进行修改：把i < li.length改成i < 3，把li标签数组静态化，然后打印
conosle.log(li.length) // 6重新用querySelector获取一遍元素
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
var ul = document.querySelector('ul');
var li = document.querySelectorAll('li');
for(var i = 0;i<li.length;i++) {
ul.appendChild(document.createElement('li'))
};
console.log(li.length);
// 输出对结果是原来的li.length = 3，而不是增加后的 6
</script>静态集合体现在querySelectorAll('li')获取到ul里所有li后，不管后续再动态添加了多少li，都是不会对其参数影响
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020 年 11 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
