We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

The Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。 如果找不到匹配项,则返回null
 

Note: The matching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of child nodes.

语法

element = document.querySelector(selectors);

参数

selectors
包含一个或多个要匹配的选择器的DOMString。 该字符串必须是有效的CSS选择器字符串;如果不是,则引发SYNTAX_ERR异常。请参阅使用选择器定位DOM元素以获取有关选择器以及如何管理它们的更多信息。

Note: Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backspace escaping, special care must be taken when writing string literals using these characters. See Escaping special characters for more information.

返回值

表示文档中与指定的一组CSS选择器匹配的第一个元素的Element对象。

如果您需要与指定选择器匹配的所有元素的列表,则应该使用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>

示例

Finding the first element matching a class

这个例子中,会返回当前文档中第一个类名为 "myclass" 的元素:

var el = document.querySelector(".myclass");

A more complex selector

Selectors can also be really powerful as demonstrated in the following example. Here, the first <input> element with the name "login" (<input name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned:

var el = document.querySelector("div.user-panel.main input[name='login']");

规范

Specification Status Comment
Selectors API Level 2
document.querySelector()
Obsolete  
Selectors API Level 1
document.querySelector()
Obsolete Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1)
bug 416317
8 10 3.2 (525.3)
WebKit bug 16587
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 yes 9 10.0 3.2

相关链接

文档标签和贡献者

标签: 
最后编辑者: changesunline,