HTML DOM Document querySelectorAll()-Methode

Definition and usage

querySelectorAll() The method returns all elements that match the CSS selector.

querySelectorAll() The method returns a NodeList.

If the selector is invalid, then querySelectorAll() The method will throw SYNTAX_ERR Exception.

Instance

Example 1

Select all elements with class="example":

document.querySelectorAll(".example");

Versuchen Sie es selbst

Example 2

Add background color to the first <p> element:

const nodeList = document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Versuchen Sie es selbst

Example 3

Add background color to the first <p> element with class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Versuchen Sie es selbst

Example 4

Number of elements with class="example":

let numb = document.querySelectorAll(".example").length;

Versuchen Sie es selbst

Example 5

Set the background color of all elements with class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Beispiel 6

Setzen Sie die Hintergrundfarbe aller <p>-Elemente:

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Beispiel 7

Setzen Sie die Rahmen aller <a>-Elemente, die das "target"-Attribut verwenden:

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Versuchen Sie es selbst

Beispiel 8

Setzen Sie die Hintergrundfarbe aller <p>-Elemente, deren übergeordneter Element <div> ist:

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Beispiel 9

Setzen Sie die Hintergrundfarbe aller <h3>-, <div>- und <span>-Elemente:

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Versuchen Sie es selbst

Syntax

document.querySelectorAll(CSSselectors)

Parameter

Parameter Beschreibung
CSSselectors

Notwendig. Ein oder mehrere CSS-Selektoren.

CSS-Selektoren wählen HTML-Elemente basierend auf id, Klasse, Typ, Attribut, Attributwert usw. aus.

Für eine vollständige Liste besuchen Sie bitte unsere CSS-Selektor-Referenzhandbuch.

Für mehrere Auswahlergebnisse trennen Sie jeden Auswahlergebnis mit einem Komma (siehe obige Beispiel).

Rückgabewert

Typ Beschreibung
Objekt

NodeList-Objekt, das Elemente enthält, die mit einem CSS-Selektor übereinstimmen.

Wird kein passender Eintrag gefunden, wird ein leerer NodeList-Objekt zurückgegeben.

Unterschied zwischen HTMLCollection und NodeList

NodeList und HTMLcollection sehr ähnlich.

Beide sind Sammlungen von Knoten (Elementen), die aus dem Dokument extrahiert wurden und ähnlich wie Arrays funktionieren. Knoten können über Indexnummern (Indizes) erreicht werden. Der Index beginnt bei 0.

Beide length eine Eigenschaft, die die Anzahl der Elemente in der Liste (Sammlung) zurückgibt.

HTMLCollection istDokumentelementSammlung.

NodeList istDokumentknotenSammlung von (Elementknoten, Attributknoten und Textknoten).

HTMLCollection-Elemente können durch ihren Namen, ihre ID oder ihre Indexnummer erreicht werden.

NodeList-Elemente können nur durch ihre Indexnummer erreicht werden.

HTMLCollection sind immerIn EchtzeitSammlung.

Beispiel: Wenn ein <li>-Element in die Liste im DOM hinzugefügt wird, ändert sich die Liste im HTMLCollection auch.

NodeList sind normalerweiseStatischSammlung.

Beispiel: Wenn ein <li>-Element in die Liste im DOM hinzugefügt wird, ändert sich die Liste im NodeList nicht.

getElementsByClassName() und getElementsByTagName() Diese Methoden geben alle einen realen HTMLCollection zurück.

querySelectorAll() Die Methode gibt einen statischen NodeList zurück.

childNodes Die Eigenschaft gibt einen realen NodeList zurück.

Browserunterstützung

document.querySelectorAll() Es ist eine Eigenschaft von DOM Level 3 (2004).

Es wird von allen Browsern unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

Tutorial:

CSS-Selektoren

CSS-Selektor-Referenzhandbuch

JavaScript NodeList-Tutorial

QuerySelector-Methode:

Methode querySelector() von Element

Methode querySelectorAll() von Element

Methode querySelector() von Document

Methode querySelectorAll() von Document

GetElement-Methode:

Methode getElementById() von Document

Methode getElementsByTagName() von Document

Methode getElementsByClassName() von Document