getElementById與querySelector的區別

getElementById與querySelector的區別

首先對獲取元素的幾個方法有所瞭解

• getElementById()：返回對擁有指定id的第一個對象的引用
• getElementsByName()：返回帶有指定名稱name的對象的集合。返回的是元素的數組，而不是一個元素（由於name不唯一）
• getElementsByTagName()：返回帶有指定標籤名的對象集合

• querySelector()：返回文檔中匹配指定CSS選擇器的第一個元素
• querySelectorAll() ：返回文檔中匹配的CSS選擇器的所有元素節點列表（h5新增）

document.querySelector("p")      //獲取文檔中第一個 <p> 元素：
document.querySelector("#demo")     //獲取文檔中id="demo"的元素
document.querySelector(".example");   //獲取文檔中第一個 class="example" 的元素
document.querySelector("p.example");    //獲取文檔中 class="example"的第一個 <p> 元素
...... 
還可以寫CSS的並集選擇器、複合選擇器等等。按照css規範來實現。

要知道的是querySelector()方法僅僅返回匹配指定選擇器的第一個元素。你可以使用querySelectorAll() 方法替代去返回匹配指定選擇器的所有的元素。返回的是節點列表NodeList 對象，可以通過索引訪問，索引值從0開始。

例如：

// 獲取文檔中所有的 <p> 元素
var x = document.querySelectorAll("p"); 
// 通過索引訪問，設置第一個 <p> 元素的背景顏色
x[0].style.backgroundColor = "red";

由於querySelector是按css規範來實現的，所以它傳入的字符串中第一個字符不能是數字。
前三種getxxxByxxx獲取的是動態集合，而querySelector獲取的是靜態集合。
簡單的說就是，動態就是選出的元素會隨文檔改變，靜態的不會，取出來之後就和文檔的改變無關了。

getElementById性能更好，而querySelector按照CSS選擇器規範，當在多級查找時，更爲方便。