getElement*** 与querySelector（All）的区别

学习JavaScript高级中，发现getElement*** 与querySelector（All）都能拿到dom节点，故想了解下他们的差别：

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

1、区别

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

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

先看看一个例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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、性能

使用getElementById的性能要好些。

3、querySelector() 与 querySelectorAll()

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

4、总结

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

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