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
61
62
63
64
65
66
67
68
69
|
---
title: Node.previousSibling
slug: Web/API/Node/previousSibling
translation_of: Web/API/Node/previousSibling
---
<p>{{ ApiRef() }}</p>
<p>{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}</p>
<h3 id="Summary" name="Summary">Allgemein</h3>
<p>Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">vorangestellterKnoten = node.previousSibling;
</pre>
<h3 id="Example" name="Example">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>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>
</body>
</html>
</pre>
<p>So kann der vorangestellte Datenknoten von <code><ul></code> ermittelt werden:</p>
<pre class="brush:javascript"> // Diese Variable speichert eine Referenz auf das letzte Element, das <body> enthält, also <ul>
var element = document.body.children[2];
// Nun ermitteln wir durch previousSibling den vorangestellten Knoten
var vorangestellterKnoten = element.previousSibling;
// Ausgabe des Knoten-Namens
alert(vorangestellterKnoten.nodeName);
</pre>
<p><strong>Erläuterung:</strong></p>
<p>Die Variable <code><var>element</var></code> enthält das letzte Kindelement des -Tags, also <code><ul></code>. <code><var>vorangestellterKnoten</var></code> speichert den direkt vorangestellten Geschwisterknoten von <code><ul></code>. 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> von <code><p></code> und dem <code><</code> des <code><ul></code> befinden. Das alert()-Fenster gibt somit <code>#text</code> aus.</p>
<p>So können alle vorangestellten Datenknoten eines Elements ermittelt werden:</p>
<pre class="brush:javascript">var element = document.body.children[2];
var liste = [];
while(element.previousSibling) {
var element = liste[liste.push(element.previousSibling)-1];
}
</pre>
<p>Das Skript erzeugt ein Array <code><var>liste</var></code> mit folgendem Inhalt:</p>
<pre class="eval">Array[5]
0: Text
1: HTMLParagraphElement
2: Text
3: HTMLDivElement
4: Text
</pre>
<h3 id="Notes" name="Notes">Anmerkungen</h3>
<p>Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.<br>
Da die Eigenschaft <code>previousSibling</code> Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von <code>previousSibling</code> als Textknoten interpretiert wird.<br>
Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}</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-previousSibling">DOM Level 1 Core: previousSibling</a> (en)</li>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> (en)</li>
</ul>
<h3 id="Siehe_auch">Siehe auch</h3>
<ul>
<li>{{ domxref("Node.nextSibling") }}</li>
<li>{{ domxref("Element.previousElementSibling") }}</li>
<li>{{ domxref("Node.childNodes") }}</li>
</ul>
|
