HTML DOM querySelectorAll() 方法
示例
設定 "myDiv" 中第一個 class="example" 元素的背景顏色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
自己動手試一試 »
更多“自己嘗試”的例子見下文。
描述
querySelectorAll() 方法返回所有匹配 CSS 選擇器的子元素。
querySelectorAll() 方法返回一個 NodeList。
如果選擇器無效，querySelectorAll() 方法將丟擲 SYNTAX_ERR 異常。
NodeList（節點列表）
NodeList 是一個類似陣列的節點集合（列表）。
列表中的節點可以透過索引訪問。索引從 0 開始。
length 屬性 返回列表中節點的數量。
語法
element.querySelectorAll(CSS 選擇器)
引數
| 引數 | 描述 |
| CSS 選擇器 | 必需。 一個或多個 CSS 選擇器。 CSS 選擇器根據 ID、類、型別、屬性、屬性值等選擇 HTML 元素。 有關完整列表，請參閱我們的 CSS 選擇器參考。 對於多個選擇器，請用逗號分隔每個選擇器（參見“更多示例”）。 |
返回值
| 型別 | 描述 |
| NodeList（節點列表） | 匹配 CSS 選擇器的後代元素的集合。 NodeList 是靜態的（DOM 中的更改對集合沒有影響）。 如果指定的選擇器無效，則丟擲 SYNTAX_ERR 異常。 |
更多示例
示例
設定 "myDIV" 中第一個 <p> 元素的背景顏色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
自己動手試一試 »
示例
設定 "myDIV" 中第一個 class="example" 的 <p> 元素的背景
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
自己動手試一試 »
示例
"myDIV" 中有多少個 class="example" 的元素
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
自己動手試一試 »
示例
設定 "myDIV" 中所有 class="example" 元素的背景
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己動手試一試 »
示例
設定 "myDIV" 中所有 <p> 元素的背景顏色
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己動手試一試 »
示例
設定 "myDIV" 中所有具有 "target" 屬性的 <a> 元素的邊框樣式
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
自己動手試一試 »
示例
設定文件中所有 <h3> 和 <span> 元素的背景顏色
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
自己動手試一試 »
瀏覽器支援
element.querySelectorAll() 是 DOM Level 3 (2004) 特性。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
