HTML-DOM querySelector () -Methode
Beispiele
Holen Sie sich das erste Element des Dokuments id = "Demo" von:
Versuchen »
Definition und Verwendung
querySelector () Methode gibt ein Element in dem Dokument, das den angegebenen CSS-Selektor entsprechen.
Hinweis: querySelector () -Methode einfach liefert das erste Element, das den angegebenen Selektor entspricht. Wenn Sie alle Elemente zurückgeben müssen, verwenden Sie querySelectorAll () -Methode statt.
Weitere CSS - Selektoren, besuchen Sie bitte unsere CSS - Selektoren Tutorial und unsere CSS - Selektoren Referenzhandbuch .
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.
Weg | |||||
---|---|---|---|---|---|
querySelector () | 4.0 | 8.0 | 3.5 | 3.1 | 10.0 |
Grammatik
Parameter Wert
Parameter | Typ | Beschreibung |
---|---|---|
CSS - Selektoren | Schnur | Muss. Geben Sie eine oder mehrere passende Elemente in CSS-Selektoren. Sie können ihre ID, Klassen, Typen, Attribute, Attributwerte, etc. verwenden Elemente auszuwählen. Für mehrere Selektoren, durch Komma getrennt, ein passendes Element zurückzukehren. Tipp: Weitere CSS - Selektoren finden Sie in unserem CSS - Selektoren Referenzhandbuch . |
Technische Details
DOM-Version: | Selektoren Stufe 1 Document Object |
---|---|
Rückkehr: | Das erste Anpassungselement angegebenen CSS-Selektor. Wenn nicht gefunden, gibt null zurück. Wenn Sie eine ungültige Selektor SYNTAX_ERR Ausnahme geben wird geworfen. |
Weitere Beispiele
Beispiele
Holen Sie sich das Dokument class = "Beispiel" das erste Element:
Versuchen »
Beispiele
Holen Sie sich das Dokument class = "Beispiel" das erste Element <p>:
Versuchen »
Beispiele
Holen Sie sich das Dokument "target" Attribut erste <a> Elemente:
Versuchen »
Beispiele
Das folgende Beispiel zeigt die Verwendung einer Vielzahl von Selektoren.
Angenommen, Sie die beiden Selektoren wählen: <h2> und <h3> Element.
Die erste <h2> -Element in dem folgenden Code wird eine Hintergrundfarbe des Dokuments hinzu:
<H3> A h3 Element </ h3>
document.querySelector ( "h2, h3") style.backgroundColor = "red" .;
Versuchen »
Allerdings, wenn Ihr Dokument <h3> Element <h2> -Element vor, <h3> Element wird die Hintergrundfarbe zu spezifizieren.
<H2> A h2-Element </ h2>
document.querySelector ( "h2, h3") style.backgroundColor = "red" .;
Versuchen »
Verwandte Seiten
JavaScript - Referenzhandbuch: Element .querySelector ()