HTML DOM Document querySelectorAll()
Voorbeeld
Selecteer alle elementen met class="example":
document.querySelectorAll(".example");
Hieronder meer voorbeelden.
Definitie en gebruik
De querySelectorAll()
methode retourneert alle elementen die overeenkomen met een CSS-selector(s).
De querySelectorAll()
methode retourneert een NodeList .
De querySelectorAll()
methode genereert een SYNTAX_ERR-uitzondering als de selector(s) ongeldig zijn
zelfstudies:
De referentie voor CSS-kiezers
De zelfstudie over JavaScript-knooppunten
QuerySelector-methoden:
De Element querySelector() Methode
De Element querySelectorAll() Methode
De Document querySelector() Methode
De Document querySelectorAll() Methode
GetElement-methoden:
De Document getElementById() methode
HTML DOM NodeList / HTMLCollection
De verschillen tussen een HTMLCollection en een NodeList
Een NodeList en een HTMLCollection zijn beide array-achtige verzamelingen (lijsten) van knooppunten (elementen) die uit een document zijn geëxtraheerd. De knooppunten zijn toegankelijk via indexnummers. De index begint bij 0.
Beide objecten hebben een eigenschap length die het aantal elementen in de lijst retourneert.
Een HTMLCollection is een live collectie : als je een <li> element toevoegt aan een lijst in de DOM, zal de lijst in de HTMLCollection ook veranderen.
Een NodeList is een statische verzameling : als u een <li>-element toevoegt aan een lijst in de DOM, verandert de lijst in NodeList niet.
De getElementsByClassName()
en getElementsByTagName()
methoden retourneren een HTMLCollection.
De querySelector()
en querySelectorAll()
methoden retourneren een NodeList.
Syntaxis
document.querySelectorAll(CSS selectors)
Parameters:
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Winstwaarde
Type | Beschrijving |
Object | Een NodeList met de elementen die overeenkomen met de CSS-kiezer(s). Als er geen overeenkomsten worden gevonden, null wordt geretourneerd. |
Meer voorbeelden
Voeg een achtergrondkleur toe aan het eerste <p> element:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Voeg een achtergrondkleur toe aan het eerste <p> element met class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Aantal elementen met class="example":
let numb = document.querySelectorAll(".example").length;
Stel de achtergrondkleur van alle elementen in met class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel de achtergrondkleur van alle <p> elementen in:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel de rand van alle <a> elementen in met een "target" attribuut:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Stel de achtergrondkleur in van elk <p>-element waarvan het bovenliggende element een <div>-element is:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Stel de achtergrondkleur van alle <h3>, <div> en <span> elementen in:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Browserondersteuning
document.querySelectorAll()
is een DOM Level 3 (2004)-functie.
Het wordt volledig ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |