JavaScript 中使用 document.querySelector()
ZKEASOFT June 09, 2017
返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素,并按照子节点数量的顺序迭代顺序节点)。
语法
element = document.querySelector(selectors);
其中
例子
这个例子中,会返回当前文档中第一个类名为 "myclass
" 的元素:
var el = document.querySelector(".myclass");
例子:一个强大的选择方式
这个例子中,你将感受到selectors的强大。例子将返回<div class="user-panel main">标签中的
<input name="login"/>标签。
<div class="user-panel main"> <input name="login"/> //这个标签将被返回 </div>
<script>var el = document.querySelector("div.user-panel.main input[name=login]");
</script>
注意
如果没有找到匹配元素,则返回 null
,如果找到多个匹配元素,则返回第一个匹配到的元素。
如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。
如果指定的选择器不合法,则抛出 SYNTAX_ERR
异常。
querySelector()在
Selectors API 中引入。
传递给 querySelector
的字符串参数必须符合 CSS 语法。
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>