HTML DOM Document querySelectorAll() method

Definitie en gebruik

querySelectorAll() De methode retourneert alle elementen die overeenkomen met de CSS selector.

querySelectorAll() De methode retourneert een NodeList.

als de selector ongeldig is querySelectorAll() De methode gooit SYNTAX_ERR Uitzondering.

Voorbeeld

Voorbeeld 1

Selecteer alle elementen met class="example":

document.querySelectorAll(".example");

Try it yourself

Voorbeeld 2

Voeg achtergrondkleur toe aan het eerste <p> element:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Try it yourself

Voorbeeld 3

Voeg achtergrondkleur toe aan het eerste <p> element met class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Try it yourself

Voorbeeld 4

Aantal elementen met class="example":

let numb = document.querySelectorAll(".example").length;

Try it yourself

Voorbeeld 5

Stel de achtergrondkleur in voor alle elementen met class="example":

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

Try it yourself

Example 6

Set the background color of all <p> elements:

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

Try it yourself

Example 7

Set the border of all <a> elements that use the "target" attribute:

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

Try it yourself

Example 8

Set the background color of each <p> element that is a child of a <div> element:

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

Try it yourself

Example 9

Set the background color of all <h3>, <div>, and <span> elements:

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Try it yourself

Syntax

document.querySelectorAll(CSSselectors)

Parameter

Parameter Description
CSSselectors

Required. One or more CSS selectors.

CSS selectors select HTML elements based on id, class, type, attributes, attribute values, etc.

For a complete list, please visit our CSS selector reference manual.

For multiple selectors, separate each selector with a comma (see the example above).

Return value

Type Description
Object

A NodeList object containing elements that match the CSS selector.

If no match is found, an empty NodeList object is returned.

The difference between HTMLCollection and NodeList

NodeList and HTMLcollection very similar.

both are collections of nodes (elements) extracted from the document, similar to arrays. Nodes can be accessed by index (index). The index starts from 0.

both of them length a property that returns the number of elements in the list (collection).

HTMLCollection isDocument ElementCollection.

NodeList isDocument NodeCollection of (element nodes, attribute nodes, and text nodes).

HTMLCollection items can be accessed by their name, id, or index number.

NodeList items can only be accessed by their index number.

HTMLCollections are alwaysLiveCollection.

For example: If an <li> element is added to the list in the DOM, the list in the HTMLCollection will also change.

NodeLists are usuallyStaticCollection.

For example: If an <li> element is added to the list in the DOM, the list in the NodeList will not change.

getElementsByClassName() and getElementsByTagName() Methods all return live HTMLCollections.

querySelectorAll() Methods return a static NodeList.

childNodes Properties return a live NodeList.

Browser Support

document.querySelectorAll() It is a DOM Level 3 (2004) feature.

All Browsers Support It:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related Pages

Tutorial:

CSS selectors

CSS selector reference manual

JavaScript NodeList Tutorial

Query Selector Method:

Element querySelector() Method

Element querySelectorAll() Method

Document querySelector() Method

Document querySelectorAll() Method

Get Element Method:

Document getElementById() Method

Document getElementsByTagName() Method

Document getElementsByClassName() Method