Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Document метод querySelector() возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.

Заметка: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.

Синтаксис

element = document.querySelector(selectors);

Параметры

селекторы
A 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 Locating DOM elements using selectors for more about selectors and how to manage them.

Note: 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 Escaping special characters for more information.

Return value

An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

Exceptions

SYNTAX_ERR
The syntax of the specified selectors is invalid.

Usage notes

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 pseudo-elements will never return any elements, as specified in the Selectors API.

Escaping special characters

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>

Примеры

Выбор первого элемента с совпадающим классом

В этом примере, нам вернется первый элемент в документе с классом "myclass":

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

Более сложный селектор

Селекторы, предаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:

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

Спецификации

Спецификация Статус Комментарий
Selectors API Level 2
Определение 'document.querySelector()' в этой спецификации.
Устаревшая
Selectors API Level 1
Определение 'document.querySelector()' в этой спецификации.
Устаревшая Изначальное определение

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
querySelectorChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 8Opera Полная поддержка 10Safari Полная поддержка 3.2WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка 10.1Safari iOS Полная поддержка 3.2Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: newallure, wizion, boxa6, mdnwebdocs-bot, SmartRW, NetVetal, indieveed, SlavaJan, BychekRU, Geraldus, fscholz, khalid32, thisninja
Обновлялась последний раз: newallure,