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
132
133
134
135
136
|
---
title: Element.querySelector()
slug: Web/API/Element/querySelector
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>
<p>Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
</pre>
<ul>
<li><code>element</code> и <code>baseElement</code> это {{domxref("element")}} объекты.</li>
<li><code>selectors</code> - это группа <a href="/ru-RU/docs/Web/Guide/CSS/Getting_Started/Selectors">селекторов</a> для поиска совпадения.</li>
</ul>
<h2 id="Example" name="Example">Пример</h2>
<p>Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:</p>
<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h2 id="Notes" name="Notes">Примечания</h2>
<p>Возвращает null если совпадения не найдены, иначе первый найденный элемент.</p>
<p>Генерирует исключение <code>SYNTAX_ERR</code> если указанная группа селекторов не корректна.</p>
<p><code>querySelector()</code> был представлен в WebApps API.</p>
<p>Строка аргументов передаваемая <code>querySelector()</code> должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.</p>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
<td>{{Spec2('Selectors API Level 2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatChrome(1) }}<br>
</td>
<td>
<p>{{ CompatGeckoDesktop(1.9.1) }}</p>
</td>
<td>
<p>9 [1]</p>
</td>
<td>
<p>{{CompatVersionUnknown}}</p>
</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <code>querySelector()</code> поддерживается в IE8, но только для CSS 2.1 селекторов.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref("element.querySelectorAll()")}}</li>
<li>{{domxref("document.querySelector()")}}</li>
<li>{{domxref("document.querySelectorAll()")}}</li>
<li><a href="/ru-RU/docs/Code_snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
</ul>
|
