Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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,