---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
  - API
  - DOM
  - Funktion
  - Methode(2)
  - Méthode
  - Referenz
  - Selektor
  - Selektoren
translation_of: Web/API/Document/querySelector
---
<div>{{ApiRef("DOM")}}</div>

<p>Die Methode <code><strong>querySelector()</strong></code> von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird <code>null</code> zurückgegeben.</p>

<div class="blockIndicator note">
<p><strong>Hinweis:</strong> Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (<em>depth-first pre-order</em>) durchlaufen werden.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
</pre>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><code>selectors</code></dt>
 <dd>Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine <code>SYNTAX_ERR</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>.</dd>
</dl>

<div class="note">
<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p>
</div>

<h3 id="Rückgabewert">Rückgabewert</h3>

<p>Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektoren</a> entspricht, oder <code>null</code>, wenn keine Übereinstimmungen vorhanden sind.</p>

<p>Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.</p>

<h3 id="Exceptions">Exceptions</h3>

<dl>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>Die Syntax der angegebenen Selektoren ist ungültig.</dd>
</dl>

<h2 id="Nutzungshinweise">Nutzungshinweise</h2>

<p>Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.</p>

<p><a href="/de/docs/Web/CSS/Pseudo-elements">CSS-Pseudoelemente</a> geben niemals Elemente zurück, wie in der <a href="https://www.w3.org/TR/selectors-api/#grammar">Selektoren-API</a> angegeben.</p>

<h3 id="Sonderzeichen_maskieren">Sonderzeichen maskieren</h3>

<p>Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("<code>\</code>") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals <em>zweimal</em> maskieren (einmal für den JavaScript String und einmal für <code>querySelector()</code>):</p>

<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
&lt;div id="foo:bar"&gt;&lt;/div&gt;

&lt;script&gt;
  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
  document.querySelector('#foo\bar');    // Does not match anything

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\bar'); // Match the first div

  document.querySelector('#foo:bar');    // Does not match anything
  document.querySelector('#foo\\:bar');  // Match the second div
&lt;/script&gt;</pre>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Erstes_Element_ermitteln_das_mit_einer_Klasse_übereinstimmt">Erstes Element ermitteln, das mit einer Klasse übereinstimmt</h3>

<p>In diesem Beispiel wird das erste Element im Dokument mit der Klasse "<code>myclass</code>" zurückgegeben:</p>

<pre class="brush: js">var el = document.querySelector(".myclass");
</pre>

<h3 id="Ein_komplexerer_Selektor">Ein komplexerer Selektor</h3>

<p>Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<code>&lt;input name="login"/&gt;</code>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<code>&lt;div class="user-panel main"&gt;</code>), im Dokument zurückgegeben:</p>

<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 2")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
   <td>{{Spec2("Selectors API Level 1")}}</td>
   <td>Initiale Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>



<div>{{Compat("api.Document.querySelector")}}</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li>
 <li>{{domxref("Element.querySelector()")}}</li>
 <li>{{domxref("Document.querySelectorAll()")}}</li>
 <li>{{domxref("Element.querySelectorAll()")}}</li>
 <li><a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li>
</ul>