Element：querySelector() 方法
Element 接口的 querySelector() 方法返回第一个与指定选择器组匹配的元素，该元素是调用此方法的元素的后代。
语法
querySelector(selectors)
参数
选择器 (selectors)-
一个包含一个或多个要匹配的选择器的字符串。该字符串必须是有效的 CSS 选择器字符串；如果不是，将抛出
SyntaxError异常。请注意，HTML 规范不要求属性值是有效的 CSS 标识符。如果
class或id属性值不是有效的 CSS 标识符，那么在使用它作为选择器之前，您必须对其进行转义，可以通过对该值调用CSS.escape()，或者使用 转义字符 中描述的一种技术。有关示例，请参见 转义属性值。
返回值
baseElement 的第一个匹配指定选择器组的后代元素。匹配时会考虑整个元素层次结构，包括 baseElement 及其后代之外的元素；换句话说，selectors 首先应用于整个文档，而不是 baseElement，以生成潜在元素的初始列表。然后检查结果元素，看它们是否是 baseElement 的后代。querySelector() 方法返回这些剩余元素中的第一个匹配项。
如果没有找到匹配项，返回值为 null。
异常
SyntaxErrorDOMException-
如果指定的
selectors无效，则抛出异常。
示例
我们来看几个例子。
查找具有特定属性值的特定元素
在第一个示例中，返回 HTML 文档正文中第一个既没有类型，或类型为“text/css”的 <style> 元素
const el = document.body.querySelector(
"style[type='text/css'], style:not([type])",
);
使用 :scope 伪类获取直接后代
此示例使用 :scope 伪类检索 parentElement 元素的直接子元素。
HTML
<div>
<h6>Page Title</h6>
<div id="parent">
<span>Love is Kind.</span>
<span>
<span>Love is Patient.</span>
</span>
<span>
<span>Love is Selfless.</span>
</span>
</div>
</div>
CSS
span {
display: block;
margin-bottom: 5px;
}
.red span {
background-color: red;
padding: 5px;
}
JavaScript
const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));
结果
整个层次结构都计算在内
此示例演示了在应用 selectors 时会考虑整个文档的层次结构，因此在查找匹配项时仍然会考虑指定 baseElement 之外的级别。
HTML
<div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div>
JavaScript
const baseElement = document.querySelector("p");
document.getElementById("output").textContent =
baseElement.querySelector("div span").textContent;
结果
结果如下所示
请注意，即使 baseElement 的子节点不包含 <div> 元素（它仍然是指定选择器的一部分），"div span" 选择器仍然成功匹配 <span> 元素。
转义属性值
此示例显示，如果 HTML 文档包含的 id 不是有效的 CSS 标识符，那么在使用 querySelector() 之前，我们必须转义属性值。
HTML
在以下代码中，一个 <div> 元素的 id 是 "this?element"，它不是一个有效的 CSS 标识符，因为 CSS 标识符中不允许使用 "?" 字符。
我们还有三个按钮和一个用于记录错误的 <pre> 元素。
<div id="container">
<div id="this?element"></div>
</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 container = document.querySelector("#container");
const log = document.querySelector("#log");
function random(number) {
return Math.floor(Math.random() * number);
}
function setBackgroundColor(id) {
log.textContent = "";
try {
const element = container.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");
});
结果
点击第一个按钮会报错，而第二个和第三个按钮则正常工作。
更多示例
有关 selectors 正确格式的其他示例，请参阅 Document.querySelector()。
规范
| 规范 |
|---|
| DOM # ref-for-dom-parentnode-queryselectorall① |
浏览器兼容性
加载中…
另见
- DOM 树上的选择与遍历
- CSS 指南中的属性选择器
- MDN 学习区中的属性选择器
Element.querySelectorAll()Document.querySelector()和Document.querySelectorAll()DocumentFragment.querySelector()和DocumentFragment.querySelectorAll()- 其他接受选择器的方法：
element.closest()和element.matches()。