diff options
Diffstat (limited to 'files/de/web/api/node/childnodes/index.html')
| -rw-r--r-- | files/de/web/api/node/childnodes/index.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..afbddd274e --- /dev/null +++ b/files/de/web/api/node/childnodes/index.html @@ -0,0 +1,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> |