Kursempfehlung:

HTML DOM Element firstChild Attribut

firstChild Definition und Verwendung

firstChild Das Attribut gibt den ersten Kindknoten des angegebenen Knotens zurück, als Node-Objekt.

firstChild Das Attribut ist schreibgeschützt. childNodes[0] Gleich.

Beachten Sie

firstChild Gibt den ersten Kindknoten zurück: Elementknoten, Textknoten oder Kommentar-Knoten.

Leerezeichen zwischen Elementen sind auch Textknoten.

Alternative:

firstElementChild-Attribut - firstElementChild Das Attribut gibt den ersten Kindknoten zurück (ignoriert Text- und Kommentar-Knoten).

Weitere Informationen:

childNodes-Attribut

lastChild-Attribut

nextSibling-Attribut

previousSibling-Attribut

Knotenattribute

parentNode-Attribut

nodeName-Attribut

nodeType-Attribut

nodeValue-Attribut

Beispiel

Beispiel 1

Das HTML-Inhalt des ersten Kindknotens des <ul>-Elements zurückgeben:

document.getElementById("myList").firstChild.innerHTML;

Selbst ausprobieren

Beispiel 2

Den Text des ersten Kindknotens des <select>-Elements erhalten:

let text = document.getElementById("mySelect").firstChild.text;

Selbst ausprobieren

Beispiel 3

Dieser Beispiel zeigt die Störung durch Leerzeichen.

Versuchen Sie, den Knotennamen des ersten Kindknotens von "myDIV" zu erhalten:

<div id="myDIV">
  <p>Sieht aus wie erster Kindknoten</p>
  <p>Sieht aus wie letzter Kindknoten</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Selbst ausprobieren

Beispiel 4

Wenn Sie jedoch die Leerzeichen aus der Quelle entfernen, gibt es im "myDIV" keinen #text-Knoten:

<div id="myDIV"><p>Erster Kindknoten</p><pletzter Kindknoten</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Selbst ausprobieren

HTML-Knoten und Elemente

in HTML DOM（Dokumentobjektmodell）in dem HTML-Dokument eine Sammlung von Knoten ist, die (oder keine) Kindknoten haben.

Knotensind Elementknoten、Textknoten und Anmerkungs节点.

ElementeZwischen den Elementen befindliche Leerzeichen sind ebenfalls Textknoten.

Elemente sind nur Elementknoten.

Kindknoten und Kindelemente

childNodes RückgabeKindknoten（Elementknoten、Textknoten und Anmerkungs节点）。

children RückgabeKindelemente（nicht Textknoten und Anmerkungs节点）。

firstChild und firstElementChild

firstChild Rückgabe des ErstenKindknoten（Elementknoten、Textknoten oder Anmerkungs节点）。Zwischen den Elementen befindliche Leerzeichen sind ebenfalls Textknoten.

firstElementChild Rückgabe des ErstenKindelemente（Textknoten und Anmerkungs节点 werden nicht zurückgegeben）。

lastChild und lastElementChild

lastChild Rückgabe des LetztenKindknoten（Elementknoten、Textknoten oder Anmerkungs节点）。Zwischen den Elementen befindliche Leerzeichen sind ebenfalls Textknoten.

lastElementChild Rückgabe des LetztenKindelemente（Textknoten und Anmerkungs节点 werden nicht zurückgegeben）。

Syntax

element.firstChild

oder

node.firstChild

Rückgabewert

Typ Beschreibung
Knoten

Erster Kindknoten des Knotens.

Wird kein Kind vorhanden, wird null zurückgegeben.

Browserkompatibilität

element.firstChild Es ist eine DOM Level 1 (1998) -Funktion.

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung