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
|
---
title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
translation_of: Web/API/Element/querySelectorAll
---
<div>{{APIRef("DOM")}}</div>
<h2 id="Summary" name="Summary">總覽</h2>
<p>Returns a non-live <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> of all elements descended from the element on which it is invoked that matches the specified group of CSS selectors. (The base element itself is not included, even if it matches.)</p>
<h2 id="Syntax" name="Syntax">表達式</h2>
<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);</pre>
<dl>
<dt><code>elementList</code></dt>
<dd>is a non-live node list [<code> NodeList[elements]</code> <code>] </code>of <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> objects.</dd>
<dt><code>baseElement</code></dt>
<dd>is an <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> object.</dd>
<dt><code>selectors</code></dt>
<dd>is a group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match on or elements of the DOM. </dd>
</dl>
<h2 id="Example" name="Example">範例</h2>
<p>下例是從整個網頁的 body 中，取得所有 <code>p</code> 元素：</p>
<pre class="brush: js">let matches = document.body.querySelectorAll('p');
</pre>
<p>This example returns a list of <code>p</code> children elements under a container, whose parent is a <code>div</code> that has the class 'highlighted':</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>下例是取得所有有 attribute <code>data-src</code> 的 <code>iframe</code> 元素：</p>
<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]');
</pre>
<h2 id="Notes" name="Notes">註</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="規範">規範</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>
<div>{{Compat("api.Element.querySelectorAll")}}</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">參見</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>
|
