Node: firstChild-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte firstChild-Eigenschaft des Node-Interface
gibt das erste Kind des Knotens im Baum zurück
oder null, wenn der Knoten keine Kinder hat.
Wenn der Knoten ein Document ist,
gibt diese Eigenschaft den ersten Knoten in der Liste seiner direkten Kinder zurück.
Hinweis:
Diese Eigenschaft gibt jeden Typ von Knoten zurück, der das erste Kind dieses Knotens ist.
Es kann sich um einen Text- oder einen Comment-Knoten handeln.
Wenn Sie das erste Element erhalten möchten, das ein Kind eines anderen Elements ist,
sollten Sie Element.firstElementChild verwenden.
Wert
Ein Node, oder null, wenn keiner vorhanden ist.
Beispiel
Dieses Beispiel demonstriert die Verwendung von firstChild und wie Leerzeichenknoten
die Nutzung dieser Eigenschaft beeinträchtigen können.
<p id="para-01">
<span>First span</span>
</p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
Im obigen Beispiel wird die Konsole '#text' anzeigen,
weil ein Textknoten eingefügt wird, um das Leerzeichen zwischen dem Ende des
öffnenden <p>- und des <span>-Tags beizubehalten. Jegliche
Leerzeichen
erzeugen einen #text-Knoten, sei es ein einzelnes Leerzeichen, mehrere Leerzeichen, Umbrüche,
Tabs und so weiter.
Ein weiterer #text-Knoten wird zwischen den schließenden
</span>- und </p>-Tags eingefügt.
Wenn dieses Leerzeichen aus der Quelle entfernt wird, werden die #text-Knoten nicht eingefügt und das span-Element wird zum ersten Kind des Absatzes.
<p id="para-01"><span>First span</span></p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
Jetzt wird die Konsole 'SPAN' anzeigen.
Um das Problem mit node.firstChild, das #text- oder
#comment-Knoten zurückgibt, zu vermeiden, kann Element.firstElementChild verwendet werden, um
nur das erste Elementknoten zurückzugeben.
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-node-firstchild① |