document.querySelector()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
文档对象模型Document
引用的 querySelector()
方法返回文档中与指定选择器或选择器组匹配的第一个 Element
对象。如果找不到匹配项,则返回null
。
备注: 匹配是使用深度优先先序遍历,从文档标记中的第一个元素开始,并按子节点的顺序依次遍历。
语法
element = document.querySelector(selectors);
参数
selectors
-
包含一个或多个要匹配的选择器的 DOM 字符串
DOMString
。该字符串必须是有效的 CSS 选择器字符串;如果不是,则引发SYNTAX_ERR
异常。请参阅使用选择器定位 DOM 元素以获取有关选择器以及如何管理它们的更多信息。
备注: 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用退格转义,因此在使用这些字符编写字符串文字时必须特别小心。有关详细信息,请参阅转义特殊字符。
返回值
表示文档中与指定的一组 CSS 选择器匹配的第一个元素,一个 Element
对象。如果没有匹配到,则返回 null。
如果你需要与指定选择器匹配的所有元素的列表,则应该使用querySelectorAll()
。
异常
SYNTAX_ERR
-
指定
selectors
的语法无效。
注意
如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。
CSS 伪类不会返回任何元素,见 Selectors API 中的相关规定。
转义特殊字符
如果要匹配的 ID 或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector
转义):
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log("#foo\bar"); // "#fooar"
document.querySelector("#foo\bar"); // 不匹配任何元素
console.log("#foo\\bar"); // "#foo\bar"
console.log("#foo\\\\bar"); // "#foo\\bar"
document.querySelector("#foo\\\\bar"); // 匹配第一个 div
document.querySelector("#foo:bar"); // 不匹配任何元素
document.querySelector("#foo\\:bar"); // 匹配第二个 div
</script>
示例
查找第一个匹配 class 属性的 html 元素
这个例子中,会返回当前文档中第一个类名为 "myclass
" 的元素:
var el = document.querySelector(".myclass");
一个更复杂的选择器
规范
Specification |
---|
DOM Standard # ref-for-dom-parentnode-queryselector① |
浏览器兼容性
BCD tables only load in the browser