files/de/web/api/node/firstchild/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
61
62

---
title: Node.firstChild
slug: Web/API/Node/firstChild
translation_of: Web/API/Node/firstChild
---
<p>{{ ApiRef() }}</p>

<h2 id="Allgemein" name="Allgemein">Allgemein</h2>

<p><code>firstChild</code> gibt den ersten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="eval">var ersterKindknoten = element.firstChild;
</pre>

<p>Die Variable <var>ersterKindknoten</var> enthält einen Datenknoten.</p>

<h2 id="Beispiel" name="Beispiel">Beispiel</h2>

<p>Folgendes HTML-Dokument ist gegeben:</p>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;h3&gt;Texte&lt;/h3&gt;
    &lt;p&gt;Hier steht Text!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:</p>

<pre class="brush:javascript">var ersterKindknoten = document.body.firstChild;
</pre>

<p>In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Start-Tag von <code>&lt;body&gt;</code> ein Zeilenumbruch und vier Leerzeichen befinden.</p>

<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2>

<ul>
 <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li>
 <li><code>firstChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>firstChild</code> bitte {{ domxref("Element.firstElementChild") }}.</li>
</ul>

<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a> (en)</li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a> (en)</li>
</ul>

<h2 id="Siehe_auch">Siehe auch:</h2>

<ul>
 <li>{{ domxref("Node") }}</li>
 <li>{{ domxref("Node.lastChild") }}</li>
 <li>{{ domxref("Node.previousSibling") }}</li>
 <li>{{ domxref("Node.childNodes") }}</li>
</ul>

<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}</p>