Document 對象
擷取文檔中 class="example" 的所有元素:
var x = document.querySelectorAll(".example");
querySelectorAll() 方法傳回文檔中比對指定 CSS 選擇器的所有元素，傳回 NodeList 對象。
NodeList 對象表示節點的集合。可以通過索引通路，索引值從 0 開始。
提示: 你可以使用 NodeList 對象的
length 屬性來擷取比對選擇器的元素屬性，然後你可以周遊所有元素，進而擷取你想要的資訊。
更多 CSS 選擇器可以參考
CSS 選擇器教程 ，
CSS 選擇器參考手冊。
表格中的數字表示支援該方法的第一個浏覽器的版本号。
方法
querySelectorAll()
4.0
8.0
3.5
3.2
10.0
注意: Internet Explorer 8 支援 CSS2 選擇器。
IE9 及更高版本的浏覽器已經支援 CSS3 選擇器。
elementList 是一個靜态的 NodeList 類型的對象。
selectors 是一個由逗号連接配接的包含一個或多個 CSS 選擇器的字元串。
參數
類型
描述
CSS 選擇器
String
必須。 指定一個或多個比對 CSS 選擇器的元素。可以通過 id, class, 類型, 屬性, 屬性值等作為選擇器來擷取元素。
多個選擇器使用逗号(,)分隔。
提示: CSS 選擇器更多内容可以參考
DOM 版本:
Level 1 Document Object
傳回值:
一個 NodeList 對象，表示文檔中比對指定 CSS 選擇器的所有元素。 NodeList 是一個靜态的 NodeList 類型的對象。如果指定的選擇器不合法，則抛出一個 SYNTAX_ERR 異常。
擷取文檔中所有的 <p> 元素， 并為比對的第一個 <p> 元素 (索引為 0) 設定背景顔色:
// 擷取文檔中所有的 <p> 元素
var x = document.querySelectorAll("p");
// 設定第一個 <p> 元素的背景顔色
x[0].style.backgroundColor = "red";
擷取文檔中所有 class="example" 的 <p> 元素， 并為比對的第一個 <p> 元素 (索引為 0) 設定背景顔色:
// 擷取文檔中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example");
// 設定 class="example" 的第一個 <p> 元素的背景顔色
計算文檔中 class="example" 的 <p> 元素的數量（使用 NodeList 對象的 length 屬性）:
var x = document.querySelectorAll(".example").length;
設定文檔中所有 class="example" 元素的背景顔色:
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
設定文檔中所有 <p> 元素的背景顔色：
查找文檔中共包含 "target" 屬性的 <a> 标簽，并為其設定邊框:
var x = document.querySelectorAll("a[target]");
x[i].style.border = "10px solid red";
查找每個父元素為 <div> 的 <p> 元素，并為其設定背景顔色:
var x = document.querySelectorAll("div > p");
給文檔中所有的 <h2>, <div> 和 <span> 元素設定背景顔色：
var x = document.querySelectorAll("h2, div, span");
CSS 教程: CSS 選擇器
CSS 參考手冊: CSS 選擇器參考手冊
JavaScript 教程: JavaScript HTML DOM 節點清單
HTML DOM 參考手冊: document.querySelector()
HTML DOM 參考手冊: element.querySelectorAll()