HTML DOM Element querySelectorAll() 方法

定義和用法

querySelectorAll() 方法返回與指定 CSS 選擇器匹配的元素的子元素的集合，以靜態 NodeList 對象。

NodeList

NodeList 是類數組的節點集合（列表）。

列表中的節點可以通過索引（下標）訪問。索引從 0 開始。

length 屬性可返回列表中的節點數。

另請參閱：

參考手冊：

classList 屬性

className 屬性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style 對象

教程：

CSS 語法

CSS 選擇器

CSS 選擇器參考手冊

實例

例子 1

設置 <div> 元素中 class="example" 的第一個元素的背景顏色：

// 獲取 id="myDIV" 的元素（div），然后獲取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 設置 div 中第一個 class="example" (index 0) 的元素的背景顏色
x[0].style.backgroundColor = "red";

親自試一試

提示：頁面下方提供更多實例。

語法

element.querySelectorAll(cssSelectors)

參數

參數 描述
cssSelectors

必需。字符串。規定一個或多個 CSS 選擇器來匹配元素。

CSS 選擇器用于根據 id、類、類型、屬性、屬性值等選擇 HTML 元素。

對于多個選擇器，用逗號分隔每個選擇器。

提示：有關所有 CSS 選擇器的列表，請查看我們的 CSS 選擇器參考手冊。

技術細節

返回值：

NodeList 對象，表示與指定 CSS 選擇器匹配的當前元素的所有后代元素。

NodeList 是靜態的集合，這意味著 DOM 中的改變對集合沒有影響。

注意：如果指定的選擇器無效，則拋出 SYNTAX_ERR 異常
DOM 版本： Selectors Level 1 Document Object

更多實例

例子 2

獲取 <div> 元素內的所有 <p> 元素，并設置第一個 <p> 元素（索引 0）的背景顏色：

// 獲取 id="myDIV" 的元素（div），然后獲取 div 內的所有 p 個元素
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 設置 div 中第一個 <p> 元素（索引 0）的背景顏色
x[0].style.backgroundColor = "red";

親自試一試

例子 3

獲取 <div> 中 class="example" 的所有 <p> 元素，并設置第一個 <p> 元素的背景：

// 獲取 id="myDIV" 的元素（div），然后在 div 中獲取所有具有 class="example" 的 p 元素
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// 設置 div 中 class="example" 的第一個 <p> 元素 (index 0) 的背景顏色
x[0].style.backgroundColor = "red";

親自試一試

例子 4

找出 <div> 元素中有多少帶有 class="example" 的元素（使用 NodeList 對象的 length 屬性）：

/* 獲取 id="myDIV" 的元素（div），然后獲取 div 內所有 class="example" 的 p 元素，返回找到的元素個數 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

親自試一試

例子 5

設置 <div> 元素中 class="example" 的所有元素的背景顏色：

// 獲取 id="myDIV" 的元素（ div），然后在 div 中獲取所有 class="example" 的元素
var x = document.getElementById("myDIV").querySelectorAll(".example");
// 創建 for 循環并設置 div 中所有 class="example" 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

親自試一試

例子 6

設置 <div> 元素中所有 <p> 元素的背景顏色：

// 獲取 id="myDIV" 的元素（div），然后獲取 div 內的所有 p 個元素
var x = document.getElementById("myDIV").querySelectorAll("p");
// 創建 for 循環并設置 div 中所有 p 元素的背景顏色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

親自試一試

例子 7

設置 <div> 元素中所有設置 target 屬性的 <a> 元素的邊框樣式：

// 獲取 id="myDIV" 的元素（ div），然后在 div 中獲取所有具有 "target" 屬性的 <a> 元素
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// 創建 for 循環并在 div 中設置所有帶有 targe t屬性的 <a> 元素的邊框
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

親自試一試

例子 8

設置 <div> 元素中所有 <h2>、<div> 和 <span> 元素的背景顏色：

// 獲取 id="myDIV" 的元素（ div），然后獲取 <div> 內的所有 <h2>、<div> 和 <span> 元素
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// 創建 for 循環并設置 <div> 中所有 <h2>、<div> 和 <span> 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

親自試一試

瀏覽器支持

表中的數字注明了首個完全支持該方法的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

注意：Internet Explorer 8 支持 CSS2 選擇器。IE9 及更高版本還支持 CSS3。

相關頁面

CSS 教程：CSS 選擇器

CSS 參考手冊：CSS 選擇器參考手冊

JavaScript 教程：JavaScript HTML DOM Node List

JavaScript 參考手冊：element.querySelector()

HTML DOM 參考手冊：document.querySelectorAll()