getElementById和querySelector方法的区别

      习惯了用jQ查找元素，有时候我们不妨试试js原生的DOM选择符，getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()。说不定一不小心就发现彩蛋了。

那么我们来说说上面那几个方法。

"querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

---------------请忽略上面那句话----------------

还不如来点实际的。

1、区别

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

先看看一个例子：

<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);  //6

//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

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

2、性能

这里就不多讲了，大家可以参考：

https://jsperf.com/getelementsby-vs-queryselectorall/7

 

3、querySelector和querySelectorAll() 

 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

 

4、总结

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector；