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
70
|
---
title: Node.childNodes
slug: Web/API/Node/childNodes
translation_of: Web/API/Node/childNodes
---
<p>{{ ApiRef() }}</p>
<h3 id="Summary" name="Summary">Allgemein</h3>
<p><code>childNodes</code> gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (<code>childNodes</code>) eines bestimmten HTML-Elements enthält, zurück.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">var <var>nodeList</var> = referenzElement.childNodes;
</pre>
<p><var>nodeList</var> ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt <code>childNodes</code> eine leere <code>NodeList</code> zurück.<br>
<br>
Diese Eigenschaft kann nur ausgelesen werden (read-only).</p>
<h3 id="Beispiel" name="Beispiel">Beispiel</h3>
<p>Folgendes HTML-Dokument liegt vor:</p>
<pre class="brush:html"><!DOCTYPE html>
<html>
<body>
<h3>Neue Mitarbeiter eingestellt</h3>
<p>Dank der guten Konjunktur letzten Jahres [...]</p>
</body>
</html>
</pre>
<p>Nun sollen die <code>childNodes</code> von <code><body></code> ausgelesen und in einer Liste namens <code><var>nodeList</var></code> gespeichert werden:</p>
<pre class="brush:javascript">var bd = document.body;
// Zuerst werden wir überprüfen, ob das <body>-Element überhaupt Kindknoten hat.
if (bd.hasChildNodes()) {
// Nun werden wir die Eigenschaft childNodes auslesen
var nodeList = bd.childNodes;
for(var i = 0; i < nodeList.length; i++) {
// So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt
// In diesem Fall soll der Name ausgegeben werden
alert(nodeList[i].nodeName);
}
}
</pre>
<p><br>
Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <code><body></code>) bewirkt eine aktualisierung der Liste.<br>
Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.<br>
Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:</p>
<pre class="brush:javascript">while(bd.firstChild) {
bd.removeChild(bd.firstChild);
}
</pre>
<h3 id="Notes" name="Notes">Anmerkungen</h3>
<p>Mit <code>childNodes</code> erhalten Sie eine Liste <strong>aller</strong> Kindknoten, <strong>einschließlich</strong> derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt <code>childNodes</code> die Eigenschaft {{ domxref('Element.children') }}.</p>
<p>Die Einträge in <var><code>nodeList</code></var> sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in <var><code>nodeList</code></var> aufgeführten Elements auszulesen, muss man die eigenschaft <code>nodeName</code> auslesen:</p>
<pre class="brush:javascript">var name = nodeList[i].nodeName;</pre>
<p>Das <code>document</code> Objekt hat zwei Kindknoten: Die <code>Doctype</code>-Deklaration und das <code>root</code>-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.<br>
Folgendermaßen kann darauf zugegriffen werden:</p>
<pre class="brush:javascript">var root = document.documentElement;</pre>
<p>In (X)HTML-Dokumenten stellt das <code>HTML</code>-Element das <code>root</code>-Element dar.</p>
<h4 id="See_Also" name="See_Also">Siehe auch</h4>
<ul>
<li>{{ domxref("Node") }}</li>
<li>{{ domxref("Node.firstChild") }}</li>
<li>{{ domxref("Node.nodeName") }}</li>
<li>{{ domxref('Element.children') }}</li>
<li>{{ domxref("CharacterData") }}</li>
</ul>
<h3 id="Specification" name="Specification">Spezifikationen</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a> (en)</li>
<li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a> (en)</li>
<li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a> (en)</li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}</p>
|
