querySelector和getElementById方法的区别

发表于 更新于
人总是喜欢自己没有的
### 介绍 querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素； querySelectorAll()用于选择匹配到的所有元素。 query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。 ### 说明 querySelector list 是一个静态的 Node List，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>
<script>

var ul=document.querySelector('ul');
var list=ul.querySelectorAll('li');
for(var i=0;i<list.length;i++){
    ul.appendChild(document.createElement('li'));
}
//这个时候就创建了3个新的li，添加在ul列表上。
console.log(list.length);
// 输出的结果仍然是3，不是此时li的数量6
</script>

getElementById
list 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>
<script>
var ul=document.getElementsByTagName('ul')[0];
var list=ul.getElementsByTagName('li');
for(var i=0;i<5;i++){
    ul.appendChild(document.createElement('li'));
}   
console.log(list.length)//此时输出的结果就是3+5=8
</script>