Element.querySelectorAll()

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

Browser compatibility

See also

• querySelector()
• document.querySelectorAll
• document.querySelector
• Code snippets for querySelector