Beispiel
Holen Sie sich das erste Element in dem Dokument mit class = „example“:
document.querySelector(".example"); Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die querySelector() Methode gibt das erste Element , das eine angegebene CSS übereinstimmt selector(s) in dem Dokument.
Anmerkung: Die querySelector() Methode liefert nur das erste Element, die die angegebenen Selektoren übereinstimmt. Um wieder alle Spiele, verwenden Sie die querySelectorAll() Methode statt.
Wenn die Wähler eine ID in dem Dokument übereinstimmt , die mehrmals verwendet wird (Beachten Sie, dass ein "id" innerhalb einer Seite sollte eindeutig sein und sollte nicht mehr als einmal verwendet), ist es das erste passende Element zurückgibt.
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 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Syntax
document.querySelector( 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. Das zurückgegebene Element hängt von dem Element , das zuerst im Dokument gefunden wird (See "More Examples") . 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, repräsentiert das erste Element, das den angegebenen CSS übereinstimmt selector(s) . Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben. Wirft eine SYNTAX_ERR Ausnahme , wenn der angegebene selector(s) ungültig ist. |
Mehr Beispiele
Beispiel
Holen Sie sich das erste <p> Element im Dokument:
document.querySelector("p"); Versuch es selber " Beispiel
Holen Sie sich das erste <p> Element im Dokument mit class = "example":
document.querySelector("p.example"); Versuch es selber " Beispiel
Ändern Sie den Text eines Elements mit id = „Demo“:
document.querySelector("#demo").innerHTML = "Hello World!";
Versuch es selber " Beispiel
Holen Sie sich das erste <p> Element in dem Dokument , in dem die Eltern ist ein <div> Element.
document.querySelector("div > p"); Versuch es selber " Beispiel
Holen Sie sich das erste <a> Element in dem Dokument , das eine hat "target" Attribut:
document.querySelector("a[target]"); Versuch es selber " Beispiel
Dieses Beispiel zeigt, wie mehrere Selektoren arbeiten.
Angenommen, Sie zwei Elemente: ein <h2> und <h3> Element.
Der folgende Code wird eine Hintergrundfarbe mit dem ersten hinzufügen <h2> Elemente im Dokument:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Versuch es selber " Wenn jedoch das <h3> Element wurde vor dem platziert <h2> Element in dem Dokument. Das <h3> Element ist derjenige, der die rote Hintergrundfarbe erhalten wird.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS - Selektoren Referenz
JavaScript Tutorial: JavaScript HTML DOM Node List
JavaScript Referenz: Element. querySelector()
HTML DOM Referenz: Dokument. querySelectorAll()
JavaScript Referenz: Element. querySelectorAll()