files/zh-cn/web/api/element/queryselectorall/index.html


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

---
title: Element.querySelectorAll()
slug: Web/API/Element/querySelectorAll
translation_of: Web/API/Element/querySelectorAll
---
<div>{{APIRef("DOM")}}</div>

<p>返回一个non-live的<code><a href="NodeList" title="zh-cn/DOM/NodeList">NodeList</a></code>, 它包含所有元素的非活动节点，该元素来自与其匹配指定的CSS选择器组的元素。(基础元素本身不包括，即使它匹配。)</p>

<div class="note">
<p>注意：该API的定义已被移动到 {{domxref("ParentNode")}} 接口。</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="brush: js"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
</pre>

<p>其中</p>

<ul>
 <li><code>elementList</code>会是一个non-live的<code><a href="NodeList" title="zh-cn/DOM/NodeList">NodeList</a></code>对象.</li>
 <li><code>baseElement是一个</code><a href="/zh-CN/docs/DOM/element" title="DOM/element">元素</a>对象.</li>
 <li><code>selectors</code>是一组CSS选择器.</li>
</ul>

<h2 id="Example" name="Example">示例</h2>

<h3 id="dataset_selector_attribute_selectors">dataset selector &amp; attribute selectors</h3>

<pre class="brush: html">&lt;section class="box" id="sect1"&gt;
  &lt;div class="funnel-chart-percent1"&gt;10.900%&lt;/div&gt;
  &lt;div class="funnel-chart-percent2"&gt;3700.00%&lt;/div&gt;
  &lt;div class="funnel-chart-percent3"&gt;0.00%&lt;/div&gt;
&lt;/section&gt;
</pre>

<pre class="brush: js">// dataset selectors
const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)];

// attribute selectors
// const refs = [...document.querySelectorAll(`[class*="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
</pre>

<p>下面的例子返回了HTML文档中的<code>body</code>元素的所有<code><code>p</code>后代</code>元素:</p>

<pre class="brush: js">var matches = document.body.querySelectorAll('p');
</pre>

<p>下面的例子返回了<code>id</code>为<code>'test</code>'的元素的所有<code>class属性</code>为'<code>highlighted</code>'的所有div后代元素的<code>p</code>子元素:</p>

<pre class="brush:js">var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted &gt; p');
</pre>

<p>下面的例子返回了el元素的后代元素中所有拥有<code>data-src</code>属性的<code>iframe</code>元素:</p>

<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]');
</pre>

<h2 id="Notes" name="Notes">附注</h2>

<p>如果指定的CSS选择器不合法,则会抛出一个<code>SYNTAX_ERR</code> 异常.</p>

<p>返回值是一个<code>NodeList</code>对象,所以不推荐使用 for...in去遍历它(会遍历出其他无关属性)</p>

<p>想要在它身上使用数组方法,必须先把它转换为真正的数组.</p>

<h2 id="浏览器兼容性">浏览器兼容性</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>
 </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>
 </tbody>
</table>
</div>

<h2 id="Specification" name="Specification">规范</h2>

<ul>
 <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">选择器API</a></li>
</ul>

<h2 id="See_also" name="See_also">相关链接</h2>

<ul>
 <li>{{Domxref("Element.querySelector")}}</li>
 <li><a href="/zh-CN/docs/Web/API/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
 <li><a href="/zh-CN/docs/Web/API/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
 <li><a href="/zh-CN/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
</ul>