HTML-DOM-Dokument querySelectorAll()
Beispiel
Alle Elemente mit class="example" auswählen:
document.querySelectorAll(".example");
Weitere Beispiele unten.
Definition und Verwendung
Die querySelectorAll()
Methode gibt alle Elemente zurück, die mit einem oder mehreren CSS-Selektoren übereinstimmen.
Die querySelectorAll()
Methode gibt eine NodeList zurück .
Die querySelectorAll()
Methode löst eine SYNTAX_ERR-Ausnahme aus, wenn der/die Selektor(en) ungültig ist/sind
Tutorials:
Das Tutorial zur JavaScript-Knotenliste
QuerySelector-Methoden:
Die Methode querySelector() des Elements
Die Methode querySelectorAll() des Elements
Die Document querySelector()-Methode
Die Methode document querySelectorAll()
GetElement-Methoden:
Die Document getElementById()-Methode
HTML DOM NodeList / HTMLCollection
Die Unterschiede zwischen einer HTMLCollection und einer NodeList
Eine NodeList und eine HTMLCollection sind beides Array-ähnliche Sammlungen (Listen) von Knoten (Elementen), die aus einem Dokument extrahiert wurden. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Beide Objekte haben eine Längeneigenschaft , die die Anzahl der Elemente in der Liste zurückgibt.
Eine HTMLCollection ist eine Live-Sammlung : Wenn Sie einer Liste im DOM ein <li>-Element hinzufügen, ändert sich auch die Liste in der HTMLCollection.
Eine NodeList ist eine statische Sammlung : Wenn Sie ein <li>-Element zu einer Liste im DOM hinzufügen, ändert sich die Liste in NodeList nicht.
Die Methoden getElementsByClassName()
und getElementsByTagName()
geben eine HTMLCollection zurück.
Die Methoden querySelector()
und querySelectorAll()
geben eine NodeList zurück.
Syntax
document.querySelectorAll(CSS selectors)
Parameter
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"). |
Rückgabewert
Typ | Beschreibung |
Objekt | Eine NodeList mit den Elementen, die mit dem/den CSS-Selektor(en) übereinstimmen. Wenn keine Übereinstimmungen gefunden werden, null wird zurückgegeben. |
Mehr Beispiele
Fügen Sie dem ersten <p>-Element eine Hintergrundfarbe hinzu:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Fügen Sie dem ersten <p>-Element mit class="example" eine Hintergrundfarbe hinzu:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Anzahl der Elemente mit class="example":
let numb = document.querySelectorAll(".example").length;
Setzen Sie die Hintergrundfarbe aller Elemente mit class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Legen Sie die Hintergrundfarbe aller <p>-Elemente fest:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Legen Sie den Rahmen aller <a>-Elemente mit einem "Ziel"-Attribut fest:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Legen Sie die Hintergrundfarbe jedes <p>-Elements fest, bei dem das übergeordnete Element ein <div>-Element ist:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Legen Sie die Hintergrundfarbe aller <h3>-, <div>- und <span>-Elemente fest:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Browser-Unterstützung
document.querySelectorAll()
ist eine Funktion von DOM Level 3 (2004).
Es wird in allen Browsern vollständig unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |