Document.querySelector()

Gibt das erste Element des Dokuments zurück, auf das die angegebene Gruppe von Selektoren zutrifft. Der Dokumenten-Baum wird dabei mittels Tiefensuche in pre-order-Traversierung durchsucht.

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.
Arbeitsentwurf  
Selectors API Level 1
Die Definition von 'document.querySelector()' in dieser Spezifikation.
Empfehlung Initiale Definition

Browser-Kompatibilität

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: Xan2063, rillig, cqcumber
 Zuletzt aktualisiert von: Xan2063,