document.querySelector() - Web API 接口参考 编辑

文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项，则返回null。

提示: 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

语法

element = document.querySelector(selectors);

参数

selectors

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

提示:必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅Escaping special characters。

返回值

表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回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");

一个更复杂的选择器

选择器也可以非常强大，如以下示例所示.

这里, 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)内包含一个name属性为"login"的input元素<input> (<input name="login"/>) ，如何选择，如下所示:

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

规范

技术规范	状态	说明
Selectors API Level 2 document.querySelector()	Obsolete
Selectors API Level 1 document.querySelector()	Obsolete	初稿

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

相关链接

• Locating DOM elements using selectors
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()
• Code snippets for querySelector