HTML DOM querySelectorAll()Method

Document 对象参考手册Document Object

Examples

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

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

Try it Yourself »

Definition and Usage

The querySelectorAll() method returns all elements in the document that match the specified CSS selector(s), and returns aNodeListNodeList object.

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

Tip:You can use the NodeList object's lengthproperty to get the attributes of elements matching the selector, and then you can iterate through all elements to obtain the information you want.

For more CSS selectors, please refer to theCSS Selectors Tutorial ， CSS Selectors Reference Manual。

Browser Support

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

Method
querySelectorAll() 4.0 8.0 3.5 3.2 10.0

Note:Internet Explorer 8 supports CSS2 selectors. IE9 and later browsers support CSS3 selectors.

Syntax

elementList = document.querySelectorAll(selectors);
  • elementList is a static NodeList object.
  • selectors is a string containing one or more CSS selectors separated by commas.

Parameter Values

Parameter Type Description
CSS selector String Required. Specifies one or more elements that match the CSS selector(s). Elements can be obtained using id, class, type, attribute, attribute value, etc. as selectors.

Multiple selectors are separated by commas (,).

Tip:For more content on CSS selectors, please refer to theCSS Selectors Reference Manual。

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). NodeList is a static NodeList object. If the specified selector is invalid, a SYNTAX_ERR exception is thrown.

More Examples

Example

Get all <p> elements in the document, and set the background color for 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";

Try it Yourself »

Example

Get all <p> elements with class="example" in the document, and set the background color for 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";

Try it Yourself »

Example

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

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

Try it Yourself »

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"; }

Try it Yourself »

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"; }

Try it Yourself »

Example

Find all <a> tags in the document that contain the "target" attribute, and set a border for them:

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

Try it Yourself »

Example

Find each <p> element whose parent element is <div>, and set the background color for them:

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

Try it Yourself »

Example

Set the background color for 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"; }

Try it Yourself »

Related Articles

CSS Tutorial:CSS Selectors

CSS Reference Manual:CSS Selectors Reference Manual

JavaScript Tutorial:JavaScript HTML DOM Node Lists

HTML DOM Reference:document.querySelector()

HTML DOM Reference:element.querySelectorAll()

Document 对象参考手册Document Object

Other Extensions