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