Easy Tutorial
❮ Prop Number Name Prop Loc Host ❯

HTML DOM querySelectorAll() Method

Document Object

Example

Get all elements with class="example" in the document:

var x = document.querySelectorAll(".example");

Definition and Usage

The querySelectorAll() method returns all elements in the document that match a specified CSS selector(s), as a static NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers, starting from 0.

Tip: You can use the length property of the NodeList object to determine the number of elements that match the specified selector, and then you can iterate through all elements and extract the info you want.

For more CSS selectors, refer to the CSS Selectors Tutorial and CSS Selectors Reference.


Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method Chrome IE Firefox Safari Opera
querySelectorAll() 4.0 8.0 3.5 3.2 10.0

Note: Internet Explorer 8 supports CSS2 selectors. Internet Explorer 9 and later versions support CSS3 selectors.


Syntax

elementList = document.querySelectorAll(selectors);

Parameter Values

Parameter Type Description
CSS Selectors String Required. Specifies one or more CSS selectors to match the elements. These can be IDs, classes, types, attributes, attribute values, etc. <br><br>Multiple selectors are separated by commas (,). <br><br>Tip: For more information on CSS selectors, refer to the CSS Selectors Reference.

Method

DOM Version: Level 1 Document Object
Return Value: A NodeList object representing all elements in the document that match the specified CSS selector(s). The NodeList is a static NodeList type of object. If the specified selector(s) are invalid, a SYNTAX_ERR exception is thrown.

More Examples

Example

Get all <p> elements in the document and set the background color of the first matching <p> element (index 0):

// Get all <p> elements in the document
var x = document.querySelectorAll("p"); 

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red";

Example

Get all <p> elements with class="example" in the document and set the background color of the first matching <p> element (index 0):

// Get all <p> elements with class="example" in the document
var x = document.querySelectorAll("p.example"); 

// Set the background color of the first <p> element with class="example"
x[0].style.backgroundColor = "red";

Example

Count the number of <p> elements with class="example" in the document (using the NodeList object's length property):

var x = document.querySelectorAll(".example").length;

Example

Set the background color of all elements with class="example" in the document:

var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

Example

Set the background color of all <p> elements in the document:

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

Example

Find all <a> tags with a "target" attribute in the document and set their borders:

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}

Example

Find all <p> elements whose parent is a <div> element and set their background color:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

Example

Set the background color of all <h2>, <div>, and <span> elements in the document:

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

Related Articles

CSS Tutorial: CSS Selectors

CSS Reference: CSS Selectors Reference

JavaScript Tutorial: JavaScript HTML DOM NodeList

HTML DOM Reference: document.querySelector()

HTML DOM Reference: element.querySelectorAll()


Document Object

❮ Prop Number Name Prop Loc Host ❯