HTML-DOM querySelector () -Methode
Beispiele
Das erste Kind Element Textinhalt Änderung id = "Demo" des <div> Element:
x.querySelector ( "# demo") innerHTML- = "Hallo Welt!" .;
Versuchen »
Definition und Verwendung
querySelector () Methode gibt das passende Element angegebenen CSS-Selektor erstes Kind-Element.
Hinweis: querySelector () -Methode einfach liefert das erste Element, das den angegebenen Selektor entspricht. Wenn Sie alle passenden Elemente zurückgeben möchten, verwenden Sie querySelectorAll () -Methode statt.
Für weitere CSS - Selektoren können Sie unsere besuchen 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 Element-Objekt |
|---|---|
| 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
Ändern <div> Element in der ersten <p> Elementinhalt:
x.querySelector ( "p") innerHTML- = "Hallo Welt!" .;
Versuchen »
Beispiele
Ändern <div> Element in der ersten Klasse = "Beispiel" Unterelement Inhalt:
x.querySelector ( "Beispiel"). innerhtml = "Hallo Welt!" .;
Versuchen »
Beispiele
Ändern <div> Element in der ersten Klasse = "Beispiel" des <p> Element:
x.querySelector ( "p.example") innerHTML- = "Hallo Welt!" .;
Versuchen »
Beispiele
In roten Rand als ein <div> Element ein erstes Zielattribut <a> Elemente:
. X.querySelector ( "a [target]") style.border = "10px solide rot";
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 für den folgenden Code <div> Element eine Hintergrundfarbe hinzu:
<H2> A h2-Element </ h2>
<H3> A h3 Element </ h3>
</ Div>
var x = document.getElementById ( "myDiv");
x.querySelector ( "h2, h3") style.backgroundColor = "red" .;
Versuchen »
Wenn jedoch das <div> Element <h3> Element <h2> -Element vor, <h3> Element wird die Hintergrundfarbe zu spezifizieren.
<H3> A h3 Element </ h3>
<H2> A h2-Element </ h2>
</ Div>
var x = document.getElementById ( "myDiv");
x.querySelector ( "h2, h3") style.backgroundColor = "red" .;
Versuchen »
Verwandte Seiten
JavaScript - Referenzhandbuch: document.querySelector ()