Document.querySelector()
========================

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

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

Синтаксис
---------


```js
element = document.querySelector(selectors);
```

### Параметры

*селекторы*

`DOMString`, содержащий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение `SYNTAX_ERR`. Смотрите Расположение элементов DOM с использованием селекторов для того, чтобы узнать больше о селекторах и о том, как ими управлять.


**Примечание:** Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. Escaping special characters для получения дополнительной информации.

### Возвращаемое значение

Ссылка на объект типа `Element`, являющийся первым элементов в документе, который соответствует указанному набору CSS селекторов, либо `null`, если совпадений нет.

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию `querySelectorAll()`.

### Исключения

`SYNTAX_ERR`

Некорректный синтаксис указанных селекторов *selectors*.

Примечания по использованию
---------------------------

Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.

Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.

### Экранирование специальных символов

Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("`\`"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её *дважды* (первый раз для строки JavaScript и второй для `querySelector()`):


```html
<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`":


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

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

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


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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Locating DOM elements using selectors
* `document.querySelectorAll()`
* `element.querySelector()`
* `element.querySelectorAll()`
* Фрагменты кода для querySelector