理解：

document.querySelectorAll() 滿足條件返回的是全部 這個是一個是找到全部的

// querySelector 滿足條件 返回 的第一個

詳細：

獲取文件中 class="example" 的所有元素:

var x = document.querySelectorAll(".example");

定義與用法：querySelectorAll() 方法返回文件中匹配指定 CSS 選擇器的所有元素，返回NodeList物件。NodeList 物件表示節點的集合。可以通過索引訪問，索引值從 0 開始。提示:你可以使用 NodeList 物件的length屬性來獲取匹配選擇器的元素屬性，然後你可以歷所有元素，從而獲取你想要的資訊。更多 CSS 選擇器可以參考

注意：Internet Explorer 8 支援 CSS2 選擇器。 IE9 及更高版本的瀏覽器已經支援 CSS3 選擇器。

屬性值：引數為：CSS選擇器、型別：String、描述：必須。 指定一個或多個匹配 CSS 選擇器的元素。可以通過 id, class, 型別, 屬性, 屬性值等作為選擇器來獲取元素。多個選擇器使用逗號(,)分隔。
提示:CSS 選擇器更多內容可以參考CSS 選擇器參考手冊。

1、 獲取文件中所有的 <p> 元素， 併為匹配的第一個 <p> 元素 (索引為 0) 設定背景顏色:

// 獲取文件中所有的 <p> 元素 var x = document.querySelectorAll("p"); // 設定第一個 <p> 元素的背景顏色 x[0].style.backgroundColor = "red";

2、 獲取文件中所有 class="example" 的 <p> 元素， 併為匹配的第一個 <p> 元素 (索引為 0) 設定背景顏色:

// 獲取文件中所有 class="example" 的 <p> 元素 var x = document.querySelectorAll("p.example"); // 設定 class="example" 的第一個 <p> 元素的背景顏色 x[0].style.backgroundColor = "red";

3、 計算文件中 class="example" 的 <p> 元素的數量（使用 NodeList 物件的 length 屬性）:

var x = document.querySelectorAll(".example").length;

4、 設定文件中所有 class="example" 元素的背景顏色:

var x = document.querySelectorAll(".example"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

5、 設定文件中所有 <p> 元素的背景顏色：

var x = document.querySelectorAll("p"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

6、 查詢文件中共包含 "target" 屬性的 <a> 標籤，併為其設定邊框:

var x = document.querySelectorAll("a[target]"); var i; for (i = 0; i < x.length; i++) { x[i].style.border = "10px solid red"; }

7、 查詢每個父元素為 <div> 的 <p> 元素，併為其設定背景顏色:

var x = document.querySelectorAll("div > p"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

8、 給文件中所有的 <h2>, <div> 和 <span> 元素設定背景顏色：

var x = document.querySelectorAll("h2, div, span"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

詳細為參考：菜鳥教程