getElement(s)Byxxxx和querySelector(All)的区别

最新推荐文章于 2021-08-05 14:56:15 发布

程序员-小许

最新推荐文章于 2021-08-05 14:56:15 发布

阅读量366

点赞数 1

文章标签： getElement(s)Byxxxx querySelector(All)

本文链接：https://blog.csdn.net/m0_37820751/article/details/102489341

版权

querySelector()

方法返回匹配指定 CSS 选择器元素的第一个子元素，如果没有匹配返回null。

querySelectorAll()

按文档顺序返回指定元素节点的子树中匹配选择器的元素集合（NodeList），如果没有匹配返回空集合。

区别

getElement(s)Byxxxx获取的是动态集合，querySelector(All)获取的是静态集合。

例子

下面代码执行会无限循环，因为getElementsByTagName获取的是动态集合，第一次list取到里面的3个li后，每当你往ul里添加了新元素，list便会重新对文档进行查询，获取ul里的所有li。也就是getElement(s)Byxxxx获取的是动态集合，它总会随着dom结构的变化而变化。

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
<script>
//使用getElement(s)Byxxxx
var ul = document.getElementsByTagName('ul')[0],
list = ul.getElementsByTagName("li");
for(var i = 0; i < list.length ; i++){
    ul.appendChild(document.createElement("li"));
}
console.log(list.length);
</script>

使用querySelector(All)获取静态集的话就不会出现无限循环的情况。querySelectorAll('li')获取到ul里所有li后，不管后续再动态添加了多少li，都是不会对其参数影响。

//使用querySelector(All)
var ul = document.querySelectorAll('ul'),
      list = ul.querySelectorAll("li");
for(var i = 0; i < list.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( list.length);  //list的长度为3