Element.querySelectorAll Redirect 1

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 list of element objects.
  • baseElement is an element object.
  • selectors is a group of selectors to match on.

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

Notes

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)

Specification

See also

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,