HTML DOM Document querySelector()-Methode
- Vorherige Seite open()
- Nächste Seite querySelectorAll()
- Zurück zur übergeordneten Ebene HTML DOM Documents
Definition und Verwendung
querySelector() Diese Methode gibt die mit dem CSS-Selektor übereinstimmendenErsterElemente.
Um zurückzugebenAlleTreffer (nicht nur der erste Treffer), verwenden Sie bitte querySelectorAll().
Falls der Selektor ungültig ist, querySelector() und querySelectorAll() werden alle ausgelöst SYNTAX_ERR Ausnahme.
Beispiel
Beispiel 1
Beschaffen Sie das erste <p>-Element:
document.querySelector("p");
Beispiel 2
Beschaffen Sie das erste Element mit der Klasse "example":
document.querySelector(".example");
Beispiel 3
Beschaffen Sie das erste <p>-Element mit der Klasse "example":
document.querySelector("p.example");
Beispiel 4
Ändern Sie den Text des Elements mit id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Beispiel 5
Wählen Sie das erste <p>-Element, dessen übergeordneter Element der <div>-Element ist:
document.querySelector("div > p");
Beispiel 6
Wählen Sie das erste <a>-Element mit dem Attribut "target" aus:
document.querySelector("a[target]");
Beispiel 7
Wählen Sie den ersten <h3> oder den ersten <h4> aus:
<h3>Ein h3-Element</h3>
<h4>Ein h4-Element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Beispiel 8
Wählen Sie den ersten <h3> oder den ersten <h4> aus:
<h4>Ein h4-Element</h4>
<h3>Ein h3-Element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Syntax
document.querySelector(cssSelectors)
Parameter
| Parameter | Beschreibung |
|---|---|
| cssSelectors |
Erforderlich. Eine oder mehrere CSS-Selektoren. CSS-Selektoren wählen HTML-Elemente basierend auf id, Klasse, Typ, Attribut, Attributwert und so weiter aus. Für eine vollständige Liste besuchen Sie bitte unsere CSS-Selektor-Referenzhandbuch. Für mehrere Selektoren, trennen Sie jede Selektor mit Komma (siehe Beispiel oben auf der Seite). |
Rückgabewert
| Typ | Beschreibung |
|---|---|
| Objekt |
NodeList, die den ersten mit dem CSS-Selektor übereinstimmenden Element enthält. Wird null zurückgegeben, wenn kein Treffer gefunden wird. |
Unterschied zwischen HTMLCollection und NodeList
NodeList und HTMLcollection sehr ähnlich.
Beide sind ähnliche Sammlungen von Knoten (Elementen) aus dem Dokument, die wie Arrays erreicht werden können. Knoten können durch ihre Indexnummer (Index) erreicht werden. Der Index beginnt bei 0.
Beide sind length Eigenschaft, die die Anzahl der Elemente (Sammlung) in der Liste zurückgibt.
Eine HTMLCollection istDokumentelementSammlung.
Eine NodeList istDokumentknotenSammlung von (Elementknoten, Attributknoten und Textknoten).
Elemente der HTMLCollection können durch ihren Namen, ihre ID oder ihre Indexnummer erreicht werden.
Elemente der NodeList können nur durch ihre Indexnummer erreicht werden.
Eine HTMLCollection ist immerAktuellSammlung.
Beispiel: Wenn ein <li>-Element zur Liste im DOM hinzugefügt wird, ändert sich die Liste in der HTMLCollection ebenfalls.
Eine NodeList ist normalerweiseStatischSammlung.
Beispiel: Wenn ein <li>-Element zur Liste im DOM hinzugefügt wird, ändert sich die Liste in der NodeList nicht.
getElementsByClassName() und getElementsByTagName() Diese Methoden geben alle eine aktuelle HTMLCollection zurück.
querySelectorAll() Die Methode gibt eine statische NodeList zurück.
childNodes Die Eigenschaft gibt eine aktuelle NodeList zurück.
Browserkompatibilität
document.querySelector() ist eine Eigenschaft von DOM Level 1 (1998).
Es wird von allen Browsern unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Unterstützt | 9-11 | Unterstützt | Unterstützt | Unterstützt | Unterstützt |
Verwandte Seiten
Tutorial:
HTML DOM NodeList-Referenzhandbuch
QuerySelector-Methode:
GetElement-Methode:
- Vorherige Seite open()
- Nächste Seite querySelectorAll()
- Zurück zur übergeordneten Ebene HTML DOM Documents
