Beispiel
Holen Sie sich alle Elemente im Dokument mit class = „example“:
var x =
document.querySelectorAll(".example"); Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die querySelectorAll() Methode gibt alle Elemente in dem Dokument , das einen bestimmten CSS übereinstimmt selector(s) , als ein statisches Objekt NodeList.
Das NodeList Objekt stellt eine Sammlung von Knoten. Die Knoten können durch Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die Verwendung Länge Eigenschaft des NodeList Objekt die Anzahl der Elemente zu bestimmen , die dem angegebenen Selektor entspricht, dann können Sie eine Schleife durch alle Elemente und extrahieren Sie die Informationen , die Sie wollen.
Weitere Informationen über CSS - Selektoren, besuchen Sie unsere CSS - Selektoren Tutorial und unsere CSS - Selektoren Referenz .
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die das Verfahren vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Hinweis: Internet Explorer 8 Unterstützung für CSS2 - Selektoren hat. IE9 und spätere Versionen haben die Unterstützung für CSS3 auch.
Syntax
document.querySelectorAll( CSS selectors )Parameterwerte
| Parameter | Art | Beschreibung |
|---|---|---|
| CSS selectors | String | Erforderlich. Gibt ein oder mehr CSS-Selektoren, das Element zu entsprechen. Diese werden verwendet, um HTML-Elemente auswählen, basierend auf ihrer ID, Klassen, Typen, Attribute, Werte von Attributen usw. Für mehrere Selektoren Trennen jeden Selektor mit einem Komma. Tipp: Eine Liste aller CSS - Selektoren, einen Blick auf unsere CSS - Selektoren Referenz . |
Technische Details
| DOM Version: | Selektoren Stufe 1 Document Object |
|---|---|
| Rückgabewert: | Ein NodeList Objekt, stellvertretend für alle Elemente in dem Dokument, das den angegebenen CSS übereinstimmt selector(s) . Der NodeList ist eine statische Sammlung, was bedeutete, dass Änderungen in der DOM-NO-Effekt in der Sammlung. Wirft eine SYNTAX_ERR Ausnahme , wenn der selector(s) ist ungültig |
Mehr Beispiele
Beispiel
Holen Sie sich alle <p> -Elemente im Dokument, und stellen Sie die Hintergrundfarbe des ersten <p> Element (index 0) :
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; Versuch es selber " Beispiel
Holen Sie sich alle <p> -Elemente im Dokument mit class = „example“, und stellen Sie den Hintergrund des ersten <p> Element:
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; Versuch es selber " Beispiel
Finden Sie heraus, wie viele Elemente mit class = „example“ gibt es in dem Dokument (die Länge Eigenschaft des NodeList-Objekt):
var x =
document.querySelectorAll(".example").length; Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller Elemente im Dokument mit class = „example“:
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller <p> -Elemente im Dokument:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Versuch es selber " Beispiel
Stellen Sie die Grenze aller <a> Elemente in dem Dokument , das eine haben "target" Attribut:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe der einzelnen <p> Element , wenn das Mutter a <div> Element:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller <h2>, <div> und <span> -Elemente im Dokument:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS - Selektoren Referenz
JavaScript Tutorial: JavaScript HTML DOM Node List
HTML DOM Referenz: Dokument. querySelector()
HTML DOM Referenz: Element. querySelectorAll()