files/de/web/api/node/nextsibling/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div&gt;Das ist eine DIV-Box&lt;/div&gt;
    &lt;p&gt;Hier steht Text!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</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 &lt;body&gt; 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>&lt;body&gt;</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>&gt;</code> der DIV-Box und dem <code>&lt;</code> des <code>&lt;p&gt;</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>