initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..80ab2a83c2
--- /dev/null
+++ b/files/de/web/api/document/queryselectorall/index.html
@@ -0,0 +1,172 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - Document
+  - querySelectorAll
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die Methode <code><strong>querySelectorAll()</strong></code> von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektor</a>-String sein, andernfalls wird eine <code>SyntaxError</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.</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>Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Wenn <code>selectors</code> ein <a href="/de/docs/Web/CSS/Pseudo-elements">CSS Pseudo-Element</a> enthält ist die zurückgegebene Liste immer leer.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Die Syntax des <code>selectors</code>-String ist ungültig.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Eine_Liste_von_Übereinstimmungen_erhalten">Eine Liste von Übereinstimmungen erhalten</h3>
+
+<p>Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder <code>"note"</code> oder <code>"alert"</code> ist:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Hier erhalten wir eine Liste von <code>&lt;p&gt;</code>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse <code>"highlighted"</code> ist und die sich in einem Container befinden, dessen ID <code>"test"</code> ist.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>Das folgende Beispiel nutzt einen <a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektor</a>, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein <code>"data-src"</code> Attribut besitzen:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID <code>"userlist"</code> enthalten sind und deren Attribut <code>"data-active"</code> den Wert <code>"1"</code> hat:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Auf_Übereinstimmungen_zugreifen">Auf Übereinstimmungen zugreifen</h3>
+
+<p>Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft <code>length</code> 0 ist), wurden keine Übereinstimmungen gefunden.</p>
+
+<p>Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Benutzerhinweise">Benutzerhinweise</h2>
+
+<p><code>querySelectorAll()</code> verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>Wenn Sie in diesem Beispiel <code>".outer .inner"</code> im Kontext des <code>&lt;div&gt;</code> mit der Klasse <code>"select"</code> auswählen, wird das Element mit der Klasse <code>".inner"</code> immer noch gefunden, obwohl <code>.outer</code> kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (<code>".select"</code>). Standardmäßig überprüft <code>querySelectorAll()</code> nur, ob sich das letzte Element im Selektor im Suchbereich befindet.</p>
+
+<p>Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Lebender Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Originale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li>
+ <li><a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektoren</a> im CSS-Leitfaden</li>
+ <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribut-Selektoren</a> im MDN Lernbereich</li>
+ <li>{{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} und {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} und {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a class="new" href="/de/docs/Code_snippets/QuerySelector" rel="nofollow">Code-Ausschnitte für <code>querySelector()</code></a></li>
+</ul>