1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
- CSS
- DOM
- Selector
- querySelector
- выборка
- поиск элемента
- поиск элементов
- селектор
translation_of: Web/API/Document/querySelector
---
<div>{{ApiRef("DOM")}}</div>
<p>{{domxref("Document")}} метод <code><strong>querySelector()</strong></code> возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение <code>null</code>.</p>
<div class="blockIndicator note">
<p><strong>Заметка</strong>: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.</p>
</div>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="brush: js notranslate">element = document.querySelector(selectors);
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><var>селекторы</var></dt>
<dd>{{domxref("DOMString")}}, содержащий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение <code>SYNTAX_ERR</code>. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Расположение элементов DOM с использованием селекторов</a> для того, чтобы узнать больше о селекторах и о том, как ими управлять.</dd>
</dl>
<div class="blockIndicator note">
<p><strong>Заметка:</strong> Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.</p>
</div>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS селекторов</a>, либо <code>null</code>, если совпадений нет. </p>
<p>Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p>
<h3 id="Исключения">Исключения</h3>
<dl>
<dt><code>SYNTAX_ERR</code></dt>
<dd>Некорректный синтаксис указанных селекторов <var>selectors</var>.</dd>
</dl>
<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
<p>Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-элементы CSS</a> никогда не вернут никаких элементов, как указано в <a href="http://www.w3.org/TR/selectors-api/#grammar">API селекторов</a>.</p>
<h3 id="Экранирование_специальных_символов">Экранирование специальных символов</h3>
<p>Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p>
<pre class="brush: html notranslate"><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></pre>
<h2 id="Example" name="Example">Примеры</h2>
<h3 id="Выбор_первого_элемента_с_совпадающим_классом">Выбор первого элемента с совпадающим классом</h3>
<p>В этом примере, нам вернётся первый элемент в документе с классом "<code>myclass</code>":</p>
<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
</pre>
<h3 id="Notes" name="Notes">Более сложный селектор</h3>
<p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:</p>
<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]");
</pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
<td>{{Spec2("Selectors API Level 2")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
<td>{{Spec2("Selectors API Level 1")}}</td>
<td>Изначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("api.Document.querySelector")}}</p>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
<li>{{domxref("document.querySelectorAll()")}}</li>
<li>{{domxref("element.querySelector()")}}</li>
<li>{{domxref("element.querySelectorAll()")}}</li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
</ul>
|
