Latest web development tutorials

HTML-DOM querySelector () -Methode

Document Object Reference Document Object

Beispiele

Holen Sie sich das erste Element des Dokuments id = "Demo" von:

document.querySelector ( "# demo");

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

document.querySelector (CSS - Selektoren)

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

Als das erste Dokument in einem <p> -Element:

document.querySelector ( "p");

Versuchen »

Beispiele

Holen Sie sich das Dokument class = "Beispiel" das erste Element:

document.querySelector ( "Beispiel.");

Versuchen »

Beispiele

Holen Sie sich das Dokument class = "Beispiel" das erste Element <p>:

document.querySelector ( "p.example");

Versuchen »

Beispiele

Holen Sie sich das Dokument "target" Attribut erste <a> Elemente:

document.querySelector ( "a [target]");

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:

<H2> A h2-Element </ h2>
<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.

<H3> A h3 Element </ h3>
<H2> A h2-Element </ h2>

document.querySelector ( "h2, h3") style.backgroundColor = "red" .;

Versuchen »


Verwandte Seiten

JavaScript - Referenzhandbuch: Element .querySelector ()


Document Object Reference Document Object