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① |
浏览器兼容性
加载中…