diff options
Diffstat (limited to 'files/de/web/api/node/nextsibling/index.html')
| -rw-r--r-- | files/de/web/api/node/nextsibling/index.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..414e75a8ce --- /dev/null +++ b/files/de/web/api/node/nextsibling/index.html @@ -0,0 +1,60 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +<p>{{ ApiRef() }}</p> +<h3 id="Allgemein" name="Allgemein">Allgemein</h3> +<p>Gibt den Datenknoten zurück, der entsprechend der <code>childNodes</code>-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird <code>null</code> zurückgegeben.</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre class="eval">nextNode = node.nextSibling; +</pre> +<h3 id="Beispiel" name="Beispiel">Beispiele</h3> +<p>Folgendes HTML-Dokument ist gegeben:</p> +<pre class="brush:html"><!DOCTYPE html> +<html> + <body> + <div>Das ist eine DIV-Box</div> + <p>Hier steht Text!</p> + </body> +</html> +</pre> +<p>Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:</p> +<pre class="brush:javascript">// Diese Variable speichert eine Referenz auf das Erste Element, das <body> enthält, also die DIV-Box + var element = document.body.children[0]; + + // Nun ermitteln wir das folgende Element + var folgeElement = element.nextSibling; + + // Ausgabe des nodeNames + alert(folgeElement.nodeName); +</pre> +<p><strong>Erläuterung:</strong></p> +<p>Die Variable <code><var>element</var></code> enthält das erste Kindelement des <code><body></code>-Tags, also die <code>DIV</code>-Box.<br> + <code><var>folgeElement</var></code> speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>></code> der DIV-Box und dem <code><</code> des <code><p></code> befinden. Das <code>alert()</code>-Fenster gibt somit <code>#text</code> aus.</p> +<p>Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:</p> +<pre class="brush:javascript">var element = document.body.children[0]; +var liste = []; + +while(element.nextSibling) { + var element = liste[liste.push(element.nextSibling)-1]; +} +</pre> +<p>Das Skript erzeugt ein Array <code>liste</code> mit folgendem Inhalt:</p> +<pre class="eval">Array[3] + 0: Text + 1: HTMLParagraphElement + 2: Text +</pre> +<h3 id="Anmerkungen">Anmerkungen</h3> +<p>Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein <code>#text</code>-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft <code>nextSibling</code> auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt <code>nextSibling</code> die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden</p> +<h3 id="Specification" name="Specification">Spezifikationen</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> (en)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> (en)</li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}</p> +<h3 id="Siehe_auch">Siehe auch</h3> +<ul> + <li><a href="/En/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling">Element.nextElementSibling</a></li> +</ul> |