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

---
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>

{{Compat("api.Element.querySelectorAll")}}

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

<ul>
 <li><a href="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>