We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn

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 node list [ NodeList[elements] of element objects.
  • baseElement is an element object.
  • selectors is a group of selectors to match on or an elements of the DOM. 

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');    //return an element with id='test'
var matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"

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

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

Notes

If the specified "selectors" are not found inside the DOM of the page, the method queryselectorAll returns an empty NodeList as specified below:

> var x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
> [] //empty NodeList

querySelectorAll() was introduced in the WebApps API.

The string argument pass to querySelectorAll must follow the CSS syntax. See document.querySelector for a concrete example.

We could access a single item inside the NodeList in the following way:

var x = document.body.querySelectorAll('.highlighted'); 
x.length; //return the size of x
x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"

We could iterate inside a NodeList with the construct for(....) {...} as in the following code:

 var x = document.body.querySelectorAll('.highlighted');
 var index = 0;
 for( index=0; index < x.length; index++ ) {
       console.log(x[index]);
 }

So in the above way, is possible to manage and modify the behaviour of the page.

Specifications

Specification Status Comment
DOM4
The definition of 'querySelectorAll' in that specification.
Working Draft  
Selectors API Level 2
The definition of 'querySelectorAll' in that specification.
Working Draft  
Selectors API Level 1
The definition of 'querySelectorAll' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1) 8 10 3.2 (525.3)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.9.1) ? ? (Yes)

See also

Document Tags and Contributors

 Last updated by: MrDanielLewis,