We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Element.querySelectorAll Redirect 1


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);


  • elementList is a non-live list of element objects.
  • baseElement is an element object.
  • selectors is a group of selectors to match on.


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]'); 


Throws a SYNTAX_ERR exception if the specified group of selectors is invalid.

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.

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

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: Sheppy,