Document: querySelectorAll() 方法
Document 的 querySelectorAll() 方法返回一個靜態（非即時）的 NodeList，代表文件中匹配指定選擇器組的元素列表。
語法
querySelectorAll(selectors)
引數
選擇器 (selectors)-
一個包含一個或多個要匹配的選擇器的字串。該字串必須是有效的 CSS 選擇器字串；如果不是，將丟擲
SyntaxError異常。請注意，HTML 規範不要求屬性值是有效的 CSS 識別符號。如果
class或id屬性值不是有效的 CSS 識別符號，那麼在使用它作為選擇器之前，您必須對其進行轉義，可以透過對該值呼叫CSS.escape()，或者使用 跳脫字元 中描述的一種技術。有關示例，請參見 轉義屬性值。
返回值
一個非即時的 NodeList，其中包含一個 Element 物件，對應於每個至少匹配一個指定選擇器的元素；如果沒有任何匹配項，則返回一個空的 NodeList。這些元素按照文件順序排列——即，父元素在子元素之前，早期的兄弟元素在後期的兄弟元素之前。
注意： 如果指定的 selectors 包含 CSS 偽元素，則返回的列表始終為空。
異常
SyntaxErrorDOMException-
如果指定的
selectors字串語法無效，則丟擲此錯誤。
示例
獲取匹配項列表
const matches = document.querySelectorAll("p");
此示例返回文件中所有 class 為 note 或 alert 的 <div> 元素列表。
const matches = document.querySelectorAll("div.note, div.alert");
在這裡，我們獲取了那些其直接父元素是 class 為 highlighted 的 <div> 且位於 ID 為 test 的容器內的 <p> 元素列表。
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");
此示例使用屬性選擇器返回文件中包含名為 data-src 屬性的 <iframe> 元素列表。
const matches = document.querySelectorAll("iframe[data-src]");
在這裡，屬性選擇器用於返回 ID 為 user-list 的列表項中，包含 data-active 屬性且其值為 1 的列表項列表。
const container = document.querySelector("#user-list");
const matches = container.querySelectorAll("li[data-active='1']");
訪問匹配項
一旦返回匹配元素的 NodeList，你可以像訪問任何陣列一樣檢查它。如果陣列為空（即其 length 屬性為 0），則表示未找到任何匹配項。
否則，你可以使用標準的陣列表示法訪問列表內容。你可以使用任何常見的迴圈語句，例如
const highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach((userItem) => {
deleteUser(userItem);
});
轉義屬性值
此示例顯示，如果 HTML 文件包含一個無效的 CSS 識別符號 id，那麼在使用 querySelectorAll() 之前，我們必須對屬性值進行轉義。
HTML
在以下程式碼中，一個 <div> 元素的 id 是 "this?element"，它不是一個有效的 CSS 識別符號，因為 CSS 識別符號中不允許使用 "?" 字元。
我們還有三個按鈕和一個用於記錄錯誤的 <pre> 元素。
<div id="this?element"></div>
<button id="no-escape">No escape</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">Manual escape</button>
<pre id="log"></pre>
CSS
div {
background-color: blue;
margin: 1rem 0;
height: 100px;
width: 200px;
}
JavaScript
所有三個按鈕在點選時都會嘗試選擇 <div>，然後將其背景顏色設定為隨機值。
- 第一個按鈕直接使用
"this?element"值。 - 第二個按鈕使用
CSS.escape()來轉義該值。 - 第三個按鈕使用反斜槓明確轉義
"?"字元。請注意，我們還必須使用另一個反斜槓來轉義反斜槓本身，例如："\\?"。
const log = document.querySelector("#log");
function random(number) {
return Math.floor(Math.random() * number);
}
function setBackgroundColor(id) {
log.textContent = "";
try {
const elements = document.querySelectorAll(`#${id}`);
const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
elements[0].style.backgroundColor = randomColor;
} catch (e) {
log.textContent = e;
}
}
document.querySelector("#no-escape").addEventListener("click", () => {
setBackgroundColor("this?element");
});
document.querySelector("#css-escape").addEventListener("click", () => {
setBackgroundColor(CSS.escape("this?element"));
});
document.querySelector("#manual-escape").addEventListener("click", () => {
setBackgroundColor("this\\?element");
});
結果
點選第一個按鈕會報錯，而第二個和第三個按鈕則正常工作。
規範
| 規範 |
|---|
| DOM # ref-for-dom-parentnode-queryselectorall① |
瀏覽器相容性
載入中…