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.


elementList = baseElement.querySelectorAll(selectors);


is a non-live node list [ NodeList[elements] of element objects.
is an element object.
is a group of selectors to match on or an elements of the DOM. 


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

let 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':

let el = document.querySelector('#test');    //return an element with id='test'
let 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':

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


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

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

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

 let x = document.body.querySelectorAll('.highlighted');
 let index = 0;
 for( index=0; index < x.length; index++ ) {

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


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

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