Element.querySelectorAll

  • Revision slug: DOM/Element.querySelectorAll
  • Revision title: Element.querySelectorAll
  • Revision id: 364163
  • Created:
  • Creator: kimblim
  • Is current revision? No
  • Comment "... whose parent is a div that contains the class ..." could mean that it contained another element with the class. The example shows it has to be the actual element that has the class, not a child element.

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.

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