Element.querySelectorAll

  • Revision slug: Web/API/Element.querySelectorAll
  • Revision title: Element.querySelectorAll
  • Revision id: 496627
  • Created:
  • Creator: Havvy
  • Is current revision? Yes
  • Comment Link to the CSS Selectors article.

Revision Content

{{DomRef}}

Summary

Returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors.

Syntax

elementList = baseElement.querySelectorAll(selectors);

where

  • elementList is a non-live list of element objects.
  • baseElement is an element object.
  • selectors is a group of selectors to match on.

Examples

This example returns a list of all the p elements in the HTML document body:

var matches = document.body.querySelectorAll('p'); 

This example returns a list of p children elements under a container, whose parent is a div that has the class 'highlighted':

var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted > p'); 

This example returns a list of iframe elements that contain a data attribute 'src':

var matches = el.querySelectorAll('iframe[data-src]'); 

Notes

Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

querySelectorAll() was introduced in the WebApps API.

The string argument pass to querySelectorAll must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.

Remember that the returned value is a NodeList, so it's not recommended to use for...in loops nor any known array method which will throw an error. If using array methods is a must then the NodeList should be converted to an array before using them.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 {{CompatGeckoDesktop("1.9.1")}} 8 10 3.2 (525.3)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("1.9.1")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}

Specification

See also

Revision Source

<div>
 {{DomRef}}</div>
<h2 id="Summary" name="Summary">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 match the specified group of CSS selectors.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
</pre>
<p>where</p>
<ul>
 <li><code>elementList</code> is a non-live list of <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> objects.</li>
 <li><code>baseElement</code> is an <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> object.</li>
 <li><code>selectors</code> is a group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match on.</li>
</ul>
<h2 id="Example" name="Example">Examples</h2>
<p>This example returns a list of all the <code>p</code> elements in the HTML document body:</p>
<pre class="brush: js">
var 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">
var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted &gt; p'); 
</pre>
<p>This example returns a list of <code>iframe</code> elements that contain a <strong>data</strong> attribute 'src':</p>
<pre class="brush: js">
var matches = el.querySelectorAll('iframe[data-src]'); 
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Throws a <code>SYNTAX_ERR</code> exception if the specified group of selectors is invalid.</p>
<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>Remember that the returned value is a NodeList, so it's not recommended to use for...in loops nor any known array method which will throw an error. If using array methods is a must then the NodeList should be converted to an array before using them.</p>
<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>
  </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">Specification</h2>
<ul>
 <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{DOMMeth("querySelector")}}</li>
 <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>
Revert to this revision