Beispiel
Stellen Sie die Hintergrundfarbe des ersten Elements mit class = „example“ innerhalb eines <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"; Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die querySelectorAll() Methode liefert eine Sammlung eines Kind - Elemente des Elements , die einen bestimmten CSS entsprechen 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 untergeordneten Knoten zu bestimmen , die den angegebenen Selektor entspricht, dann können Sie eine Schleife durch alle Knoten 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
element .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 Nachfahre des aktuellen Elements , die einen bestimmten CSS übereinstimmt selector(s) . Der NodeList ist eine statische Sammlung, was bedeutete, dass Änderungen in der DOM-NO-Effekt in der Sammlung. Hinweis: Wirft eine SYNTAX_ERR Ausnahme , wenn der angegebene selector(s) ist ungültig |
Mehr Beispiele
Beispiel
Holen Sie sich alle <p> Elemente innerhalb eines <div> Element, und stellen Sie die Hintergrundfarbe des ersten <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"; Versuch es selber " Beispiel
Holen Sie sich alle <p> Elemente in einem <div> mit class = "example", und stellen Sie den Hintergrund des ersten <p> Element:
// 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"; Versuch es selber " Beispiel
Finden Sie heraus , wie viele Elemente mit class = „example“ gibt es in einem <div> Elemente (die Länge 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; Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller Elemente mit class = „Beispiel“ in einem <div> Elemente:
// 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";
} Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller <p> Elemente in einem <div> Elemente:
// 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";
} Versuch es selber " Beispiel
Stellen Sie die Grenze Stil aller <a> Elemente in einem <div> Element , das eine haben "target" Attribut:
// 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";
} Versuch es selber " Beispiel
Stellen Sie die Hintergrundfarbe aller <h2>, <div> und <span> Elemente in einem <div> Elemente:
// 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";
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS - Selektoren Referenz
JavaScript Tutorial: JavaScript HTML DOM Node List
HTML DOM Referenz: Element. querySelector()
HTML DOM Referenz: Dokument. querySelectorAll()