HTML DOM querySelectorAll() Methode
❮ Das Element-ObjektBeispiel
Legen Sie die Hintergrundfarbe des ersten Elements mit class="example" innerhalb eines <div>-Elements fest:
// 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";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die querySelectorAll()-Methode gibt eine Sammlung der untergeordneten Elemente eines Elements, die mit einem oder mehreren angegebenen CSS-Selektoren übereinstimmen, als statisches NodeList-Objekt zurück.
Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die length -Eigenschaft des NodeList-Objekts verwenden, um die Anzahl der untergeordneten Knoten zu bestimmen, die mit dem angegebenen Selektor übereinstimmen, dann können Sie alle Knoten durchlaufen und die gewünschten Informationen extrahieren.
Weitere Informationen zu CSS-Selektoren finden Sie in unserem Tutorial zu CSS-Selektoren und in unserer CSS-Selektoren-Referenz .
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Hinweis: Internet Explorer 8 unterstützt CSS2-Selektoren. IE9 und spätere Versionen unterstützen auch CSS3.
Syntax
element.querySelectorAll(CSS selectors)
Parameterwerte
| 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-Version: | Selektoren Dokumentobjekt der Ebene 1 |
|---|---|
| Rückgabewert: | Ein NodeList-Objekt, das alle untergeordneten Elemente des aktuellen Elements darstellt, das mit einem oder mehreren angegebenen CSS-Selektoren übereinstimmt. Die NodeList ist eine statische Sammlung, was bedeutet, dass Änderungen im DOM KEINE Auswirkung auf die Sammlung haben. Hinweis: Löst eine SYNTAX_ERR-Ausnahme aus, wenn der/die angegebene(n) Selektor(en) ungültig ist/sind |
Mehr Beispiele
Beispiel
Holen Sie sich alle <p>-Elemente innerhalb eines <div>-Elements und legen Sie die Hintergrundfarbe des ersten <p>-Elements (Index 0) fest:
// 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";
Beispiel
Holen Sie sich alle <p>-Elemente in einem <div> mit class="example" und legen Sie den Hintergrund des ersten <p>-Elements fest:
// 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";
Beispiel
Finden Sie heraus, wie viele Elemente mit class="example" in einem <div>-Element enthalten sind (mithilfe der length-Eigenschaft des NodeList-Objekts):
/* 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;
Beispiel
Setzen Sie die Hintergrundfarbe aller Elemente mit class="example" in einem <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";
}
Beispiel
Legen Sie die Hintergrundfarbe aller <p>-Elemente in einem <div>-Element fest:
// 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";
}
Beispiel
Legen Sie den Rahmenstil aller <a>-Elemente in einem <div>-Element fest, die ein "Ziel"-Attribut haben:
// 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";
}
Beispiel
Legen Sie die Hintergrundfarbe aller <h2>-, <div>- und <span>-Elemente in einem <div>-Element fest:
// 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";
}
Verwandte Seiten
CSS-Tutorial: CSS-Selektoren
CSS-Referenz: CSS-Selektoren-Referenz
JavaScript-Tutorial: JavaScript-HTML-DOM-Knotenliste
HTML-DOM-Referenz: element .querySelector()
HTML-DOM-Referenz: document.querySelectorAll()
❮ Das Element-Objekt