We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Gibt das erste Element innerhalb des Dokuments zurück (benutzt die überquerende Tiefensuche [engl. "depth-first pre-order traversal"] der Dokument-Knoten | vom ersten Markup im Dokument und wiederholend durch aufeinanderfolgend Knoten in der Reihenfolge der Anzahl der Kinder-Knoten), welches der angegebene Gruppe der Selektoren zutrifft.

Syntax

element = document.querySelector(selectors);

wobei

  • element ein element-Objekt ist.
  • selectors ein String ist, der einen oder mehrere mit Komma abgetrennte CSS-Selektoren enthält.

Beispiel

In diesem Beispiel wird das erste Element des Dokuments mit der Klasse "myclass" zurückgegeben:

var el = document.querySelector(".myclass");

Mächtiges Beispiel

Selektoren können sehr mächtig sein, wie in folgendem Beispiel gezeigt wird. Hier wir das erste Element input name="login"innerhalb eines div class="user-panel main"im Dokument zurückgegeben:

var el = document.querySelector("div.user-panel.main input[name=login]");

Anmerkungen

  • Gibt null zurück, wenn kein passendes Element gefunden wird, sonst wird das erste passende Element zurückgegeben.
  • Wenn der Selektor eine passende ID findet und diese ID fälschlicherweise mehrfach im Dokument verwendet wurde, wird die erste passende ID zurückgegeben.
  • Wirft eine SYNTAX_ERR Exception, wenn die angegebene Gruppe von Selektoren ungültig ist.
  • querySelector() wurde in der Selectors API eingeführt.
  • Der String-Parameter, der an querySelector übergeben wird, muss der CSS-Syntax entsprechen.
  • CSS-Pseudo-Klassen geben, wie in der Selectors API festgelegt, niemals Elemente zurück.

Um IDs oder Selektoren nutzen zu können, die nicht der CSS-Syntax entsprechen (z. B. durch unpassende Benutzung von Doppelpunkten oder Leerzeichen), müssen diese Zeichen mit Backslash ("\") escapet werden. Da der Backslash in JavaScript ein Escape-Zeichen ist, muss er ebenfalls escapet werden (einmal für den JavaScript-String und einmal für querySelector):

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // gibt null zurück

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // gibt das erste div-Element zurück

  document.querySelector('#foo:bar')    // gibt null zurück
  document.querySelector('#foo\\:bar')  // gibt das zweite div-Element zurück
</script>

Spezifikationen

Spezifikation Status Anmerkung
Selectors API Level 2
Die Definition von 'document.querySelector()' in dieser Spezifikation.
Veraltet  
Selectors API Level 1
Die Definition von 'document.querySelector()' in dieser Spezifikation.
Veraltet Initiale Definition

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Eigenschaft Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1)
Bug 416317
8 10 3.2 (525.3)
WebKit Bug 16587
Eigenschaft Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 ja 9 10.0 3.2

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: StevenS77, Xan2063, rillig, cqcumber
Zuletzt aktualisiert von: StevenS77,