Document: querySelector() 方法
Document 的方法 querySelector() 返回文件中第一個匹配指定 CSS 選擇器或一組 CSS 選擇器的 Element。如果沒有找到匹配項，則返回 null。
匹配透過對文件節點進行深度優先的先序遍歷來完成，從文件標記中的第一個元素開始，並按子節點數量的順序迭代後續節點。
如果指定的選擇器匹配的 ID 在文件中被錯誤地使用了不止一次，則返回具有該 ID 的第一個元素。
CSS 偽元素永遠不會返回任何元素。
語法
querySelector(selectors)
引數
選擇器 (selectors)-
一個包含一個或多個要匹配的選擇器的字串。該字串必須是有效的 CSS 選擇器字串；如果不是，將丟擲
SyntaxError異常。請注意，HTML 規範不要求屬性值是有效的 CSS 識別符號。如果
class或id屬性值不是有效的 CSS 識別符號，那麼在使用它作為選擇器之前，您必須對其進行轉義，可以透過對該值呼叫CSS.escape()，或者使用 跳脫字元 中描述的一種技術。有關示例，請參見 轉義屬性值。
返回值
返回一個 Element 物件，表示文件中第一個匹配指定 CSS 選擇器集的元素，如果沒有匹配項，則返回 null。
如果你需要所有匹配指定選擇器的元素的列表，你應該使用 querySelectorAll()。
異常
SyntaxErrorDOMException-
如果指定的 selectors 語法無效，則丟擲異常。
示例
查詢匹配類的第一個元素
在此示例中，返回文件中第一個具有類 myclass 的元素。
const el = document.querySelector(".myclass");
複雜選擇器
選擇器也可以非常強大，如下面的示例所示。此處，返回文件中類為“user-panel main”的 <div> 內部的第一個名為“login”的 <input> 元素（<input name="login"/>）。
const el = document.querySelector("div.user-panel.main input[name='login']");
否定
由於所有 CSS 選擇器字串都有效，你也可以否定選擇器。
const el = document.querySelector(
"div.user-panel:not(.main) input[name='login']",
);
這將選擇一個父級 div 具有 user-panel 類但不具有 main 類的輸入。
轉義屬性值
此示例顯示，如果 HTML 文件包含一個不是有效 CSS 識別符號的 id，那麼在使用 querySelector() 之前，我們必須對屬性值進行轉義。
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 element = document.querySelector(`#${id}`);
const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
element.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-queryselector① |
瀏覽器相容性
載入中…