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.


querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:

<div class="outer">
  <div class="select">
    <div class="inner">
let select = document.querySelector('.select');
let inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

In this example, when selecting .outer .inner in the context of .select, .inner is still found, even though .outer is not a descendant of the baseElement (.select).
querySelectorAll() only verifies that the last element in the selector is within the baseElement.

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:

let select = document.querySelector('.select');
let inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0


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)
:scope pseudo-class (Yes) 32 No support 15[1] 7.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.9.1) ? ? (Yes)
:scope pseudo-class ? 32 No support No support 7.0

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

See also


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.