古老的好文參考humanwhocodes
關鍵差異
getElementByXXX是Live NodeLists(動態)
querySelector、querySelectorAll是Static NodeLists(靜態)
getElementByXXX效能通常比較好
getElementByXXX系列是動態的例子
下面會導致infinite loop，因為body動態增加<div>的數量，divs.length一直增加
var divs = document.getElementsByTagName("div"),
i=0;
while(i < divs.length){
document.body.appendChild(document.createElement("div"));
i++;
}
querySelector、querySelectorAll則是DOM的快照，屬於靜態
下面這個就不會造成infinite loop
var divs = document.querySelectorAll("div"),
i=0;
while(i < divs.length){
document.body.appendChild(document.createElement("div"));
i++;
}
為啥還需要querySelector、querySelectorAll?
querySelector的查詢變數遵循CSS selector規範
所以在使用上比getElementByXXX系列更具操作變化彈性
需注意的是，由於遵循CSS selector規範，冒號(:)不能亂用！