習慣了用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；