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

Browser-Kompatibilität

Siehe auch

• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Codeschnipsel für querySelector