initial commit

1 files changed, 129 insertions, 0 deletions

diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..7fadcd87ce
--- /dev/null
+++ b/files/de/web/api/document/queryselector/index.html
@@ -0,0 +1,129 @@
+---
+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>