Document.querySelector()

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

Document 方法 querySelector() 返回第一 元素 在文档中匹配指定选择器或选择器组。若未找到匹配， null 被返回。

注意 : 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 containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown. See 使用选择器定位 DOM 元素 for more about selectors and how to manage them.

注意： Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See 转义特殊字符了解更多信息。

返回值

HTMLElement object representing the first element in the document that matches the specified set of CSS 选择器，或 null is returned if there are no matches.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() 代替。

异常

SYNTAX_ERR: The syntax of the specified selectors 无效。

用法注意事项

If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

CSS 伪元素 will never return any elements, as specified in the 选择器 API .

转义特殊字符

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash (" \ "). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector() ):

<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
  document.querySelector('#foo\bar');    // Does not match anything
  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\\\bar'); // Match the first div
  document.querySelector('#foo:bar');    // Does not match anything
  document.querySelector('#foo\\:bar');  // Match the second div
</script>

范例

查找匹配类的第一元素

In this example, the first element in the document with the class " myclass " is returned:

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

更复杂的选择器

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']");

Negation

As all CSS selector strings are valid, you can also negate selectors:

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

This will select an input with a parent div with the user-panel class but not the main 类。

规范

规范	状态	注释
DOM 在该规范中的 document.querySelector() 定义。	实时标准

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`querySelector`	Chrome 1	Edge 12	Firefox 3.5	IE 8	Opera 10	Safari 3.2	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 3	Samsung Internet Android 1.0

在此页

句法

参数

返回值

异常