HTML DOM querySelectorAll() Methode

Voorbeeld

Stel de achtergrondkleur van het eerste element in met class="example" in een <div> element:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Meer "Probeer het zelf" voorbeelden hieronder.

Definitie en gebruik

De methode querySelectorAll() retourneert een verzameling onderliggende elementen van een element die overeenkomen met een opgegeven CSS-selector(s), als een statisch NodeList-object.

Het NodeList-object vertegenwoordigt een verzameling knooppunten. De knooppunten zijn toegankelijk via indexnummers. De index begint bij 0.

Tip: U kunt de eigenschap length van het NodeList-object gebruiken om het aantal onderliggende knooppunten te bepalen dat overeenkomt met de opgegeven selector. Vervolgens kunt u alle knooppunten doorlopen en de gewenste informatie extraheren.

Voor meer informatie over CSS Selectors, bezoek onze CSS Selectors Tutorial en onze CSS Selectors Reference .

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Opmerking: Internet Explorer 8 heeft ondersteuning voor CSS2-selectors. IE9 en latere versies hebben ook ondersteuning voor CSS3.

Syntaxis

element.querySelectorAll(CSS selectors)

Parameterwaarden

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Technische details

DOM-versie:	Selectors Niveau 1 Document Object
Winstwaarde:	Een NodeList-object, dat alle onderliggende elementen van het huidige element vertegenwoordigt die overeenkomen met een opgegeven CSS-selector(s). De NodeList is een statische verzameling, wat betekent dat wijzigingen in de DOM GEEN effect hebben op de verzameling. Opmerking: genereert een SYNTAX_ERR-uitzondering als de opgegeven selector(s) ongeldig zijn

Meer voorbeelden

Voorbeeld

Haal alle <p> elementen binnen een <div> element, en stel de achtergrondkleur in van het eerste <p> element (index 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

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

Voorbeeld

Haal alle <p> elementen in een <div> met class="example", en stel de achtergrond van het eerste <p> element in:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

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

Voorbeeld

Zoek uit hoeveel elementen met class="example" er zijn in een <div> -element (met behulp van de eigenschap length van het NodeList-object):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Voorbeeld

Stel de achtergrondkleur van alle elementen in met class="example" in een <div> element:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Voorbeeld

Stel de achtergrondkleur in van alle <p> elementen in een <div> element:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Voorbeeld

Stel de randstijl in van alle <a>-elementen in een <div>-element met het kenmerk 'target':

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

Voorbeeld

Stel de achtergrondkleur in van alle <h2>, <div> en <span> elementen in een <div> element:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}