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 July 2015.
Die schreibgeschützte firstChild-Eigenschaft des Node-Interfaces
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 Knoten aus, der das erste Kind dieses Knotens ist.
Es kann sich um einen Text- oder einen Comment-Knoten handeln.
Falls Sie das erste Element erhalten möchten, das ein Kind eines anderen Elements ist,
erwägen Sie die Verwendung von Element.firstElementChild.
Wert
Ein Node oder null, wenn keine vorhanden sind.
Beispiel
Dieses Beispiel demonstriert die Verwendung von firstChild und wie Leerraum-Knoten
in der Nutzung dieser Eigenschaft stören 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 den Leerraum zwischen dem Ende des
öffnenden <p> und <span>-Tags zu erhalten. Jeder
Leerraum
erzeugt einen #text-Knoten, von einem einzelnen Leerzeichen bis zu mehreren Leerzeichen, Zeilenumbrüchen, Tabulatoren usw.
Ein weiterer #text-Knoten wird zwischen den schließenden </span>- und </p>-Tags eingefügt.
Wenn dieser Leerraum 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 zu vermeiden, dass node.firstChild #text oder
#comment-Knoten zurückgibt, kann Element.firstElementChild verwendet werden,
um nur den ersten Elementknoten zurückzugeben.
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-node-firstchild① |