HTML-DOM-Dokument querySelector()
Beispiele
Holen Sie sich das erste <p>-Element:
document.querySelector("p");
Holen Sie sich das erste Element mit class="example":
document.querySelector(".example");
Weitere Beispiele unten.
Definition und Verwendung
Die querySelector()Methode gibt das erste Element zurück, das mit einem CSS-Selektor übereinstimmt.
Um alle Übereinstimmungen (nicht nur die erste) zurückzugeben, verwenden Sie querySelectorAll()stattdessen das .
Beide querySelector()und querySelectorAll()geben eine NodeList zurück .
Sowohl als querySelector()auch querySelectorAll()lösen eine SYNTAX_ERR-Ausnahme aus, wenn der/die Selektor(en) ungültig ist/sind.
Tutorials:
Das Tutorial zur JavaScript-Knotenliste
QuerySelector-Methoden:
Die Methode querySelector() des Elements
Die Methode querySelectorAll() des Elements
Die Document querySelector()-Methode
Die Methode document querySelectorAll()
GetElement-Methoden:
Die Document getElementById()-Methode
HTML DOM NodeList / HTMLCollection
Die Unterschiede zwischen einer HTMLCollection und einer NodeList
Eine NodeList und eine HTMLCollection sind beides Array-ähnliche Sammlungen (Listen) von Knoten (Elementen), die aus einem Dokument extrahiert wurden. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Beide Objekte haben eine Längeneigenschaft , die die Anzahl der Elemente in der Liste zurückgibt.
Eine HTMLCollection ist eine Live-Sammlung : Wenn Sie einer Liste im DOM ein <li>-Element hinzufügen, ändert sich auch die Liste in der HTMLCollection.
Eine NodeList ist eine statische Sammlung : Wenn Sie ein <li>-Element zu einer Liste im DOM hinzufügen, ändert sich die Liste in NodeList nicht.
Die Methoden getElementsByClassName()und getElementsByTagName()
geben eine HTMLCollection zurück.
Die Methoden querySelector()und querySelectorAll()
geben eine NodeList zurück.
Syntax
document.querySelector(CSS selectors)
Parameter
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Rückgabewert
| Typ | Beschreibung |
| Objekt | Eine NodeList mit dem ersten Element, das mit dem/den CSS-Selektor(en) übereinstimmt. Wenn keine Übereinstimmungen gefunden werden, nullwird zurückgegeben. |
Mehr Beispiele
Holen Sie sich das erste <p>-Element mit class="example":
document.querySelector("p.example");
Ändern Sie den Text des Elements mit id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Wählen Sie das erste <p>-Element aus, dessen übergeordnetes Element ein <div>-Element ist.
document.querySelector("div > p");
Wählen Sie das erste <a>-Element aus, das ein "Ziel"-Attribut hat:
document.querySelector("a[target]");
Wählen Sie das erste <h3> oder das erste <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Wählen Sie das erste <h3> oder das erste <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Browser-Unterstützung
document.querySelector()ist eine Funktion von DOM Level 1 (1998).
Es wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |