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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
tags:
- Méthode
- Referenz
translation_of: Web/API/Element/querySelectorAll
---
<div>{{APIRef("DOM")}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Gibt eine statische <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
</pre>
<p>wobei:</p>
<dl>
<dt><code>elementList</code></dt>
<dd>ist statische Node Liste [<code> NodeList[elements]</code> <code>] mit</code> <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> Objekten.</dd>
<dt><code>baseElement</code></dt>
<dd>ist ein <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> Objekt.</dd>
<dt><code>selectors</code></dt>
<dd>ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selektoren</a> die mit dem Element im DOM übereinstimmen soll. </dd>
</dl>
<h2 id="Example" name="Example">Beispiele</h2>
<p>Dieses Beispiel gibt eine Liste der <code>p</code> Elementen im HTML body zurück:</p>
<pre class="brush: js">let matches = document.body.querySelectorAll('p');
</pre>
<p>Dieses Beispiel gibt eine Liste der <code>p</code> Unter-Elementen eines Containers, dessen Überobjekt ein <code>div</code> mit der Klasse 'highlighted' ist:</p>
<pre class="brush:js">let el = document.querySelector('#test'); //return an element with id='test'
let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
</pre>
<p>Dieses Beispiel gibt eine Liste der <code>iframe</code> Elementen die ein <strong>data</strong> Attribut 'src' besitzen:</p>
<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]');
</pre>
<h2 id="Notes" name="Notes">Bemerkungen</h2>
<p>If the specified "selectors" are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p>
<pre class="brush: js">> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
> [] //empty NodeList</pre>
<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p>
<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p>
<p>We could access a single item inside the NodeList in the following way:</p>
<pre class="brush: js">let x = document.body.querySelectorAll('.highlighted');
x.length; //return the size of x
x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
</pre>
<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p>
<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted');
let index = 0;
for( index=0; index < x.length; index++ ) {
console.log(x[index]);
}</pre>
<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p>
<h2 id="Quirks">Quirks</h2>
<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p>
<pre class="brush: html"><div class="outer">
<div class="select">
<div class="inner">
</div>
</div>
</div></pre>
<pre class="brush: js">let select = document.querySelector('.select');
let inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!
</pre>
<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br>
<code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p>
<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p>
<pre class="brush: js">let select = document.querySelector('.select');
let inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<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>1</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>8</td>
<td>10</td>
<td>3.2 (525.3)</td>
</tr>
<tr>
<td><code>:scope</code> pseudo-class</td>
<td>{{ CompatVersionUnknown }}</td>
<td>32</td>
<td>{{CompatNo}}</td>
<td>15<sup>[1]</sup></td>
<td>7.0</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>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>:scope</code> pseudo-class</td>
<td>{{ CompatUnknown }}</td>
<td>32</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>7.0</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable <style scoped></strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
<li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
</ul>
|
