HTML DOM Element querySelector() Methode

Definition und Verwendung

querySelector() Die Methode gibt den ersten Kind-Element zurück, das mit dem angegebenen CSS-Selector übereinstimmt.

Hinweis:

querySelector() Die Methode gibt nur das erste Element zurück, das mit dem angegebenen Selector übereinstimmt. Um alle Übereinstimmungen zurückzugeben, verwenden Sie bitte querySelectorAll() Methode.

Weitere Informationen siehe:

Referenzhandbuch:

classList Eigenschaft

className Eigenschaft

querySelectorAll() Methode

getElementsByTagName() Methode

getElementsByClassName() Methode

HTML DOM Style-Objekt

Tutorium:

CSS-Syntax

CSS-Selektoren

CSS-Selektoren Referenzhandbuch

Beispiel

Beispiel 1

Ändern Sie den Text des ersten Kindes mit class="example" im <div>-Element:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Selbst ausprobieren

Mehr Beispiele finden Sie unten auf der Seite.

Syntax

element.querySelector(CSSselectors)

Parameter

Parameter Beschreibung
CSSselectors

Erforderlich. String. Ein oder mehrere CSS-Selektoren werden angegeben, um Elemente zu matchen.

CSS-Selektoren werden verwendet, um HTML-Elemente basierend auf id, Klasse, Typ, Attribut, Attributwert usw. auszuwählen.

Für mehrere Selektoren bitte jeden Selector durch Komma trennen.

Das zurückgegebene Element hängt davon ab, welches Element zuerst im Dokument gefunden wird (siehe unten "Mehr Beispiele").

Hinweis:Für eine vollständige Liste der CSS-Selektoren bitte unsere CSS-Selektoren Referenzhandbuch.

Technische Details

Rückgabewert:

Gibt das erste Element zurück, das dem angegebenen CSS-Selector entspricht.

Wird kein passender Eintrag gefunden, wird null zurückgegeben.

Wird der angegebene Selector ungültig, wird eine SYNTAX_ERR-Ausnahme ausgelöst.
DOM-Version: Selectorenstufe 1 Element-Objekt

Mehr Beispiele

Beispiel 2

Ändern Sie den Text des ersten <p>-Elements im <div>-Element:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Selbst ausprobieren

Beispiel 3

Ändern Sie den Text des ersten <p>-Elements mit class="example" im <div>-Element:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Selbst ausprobieren

Beispiel 4

Ändern Sie den Text des Elements mit id="demo" im <div>-Element:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Selbst ausprobieren

Beispiel 5

Fügen Sie dem ersten <a>-Element im <div> mit der target-Attribut eine rote Umrandung hinzu:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Selbst ausprobieren

Beispiel 6

Dieses Beispiel zeigt, wie Multiple Selector funktionieren.

Angenommen, Sie haben zwei Elemente: <h2>- und <h3>-Elemente.

Der folgende Code fügt dem ersten <h2>-Element im <div> eine Hintergrundfarbe hinzu:

<div id="myDIV">
  <h2>Ein h2-Element</h2>
  <h3>Ein h3-Element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Selbst ausprobieren

Beispiel 7

Allerdings wird das <h3>-Element eine rote Hintergrundfarbe erhalten, wenn es im <div>-Element vor dem <h2>-Element platziert ist.

<div id="myDIV">
  <h3>Ein h3-Element</h3>
  <h2>Ein h2-Element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Selbst ausprobieren

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die diese Methode vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Verwandte Seiten

CSS-Tutorial:CSS-Selektoren

CSS Referenzhandbuch:CSS-Selektoren Referenzhandbuch

JavaScript-Tutorial:JavaScript HTML DOM Node List

JavaScript Referenzhandbuch:document.querySelector()

JavaScript Referenzhandbuch:element.querySelectorAll()

HTML DOM Referenzhandbuch:document.querySelectorAll()