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 der Node-Schnittstelle
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 ein Text- oder ein Comment-Knoten sein.
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 Whitespace-Knoten
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 zeigt die Konsole '#text' an,
weil ein Textknoten eingefügt wird, um Leerraum zwischen dem Ende des
öffnenden <p>- und des <span>-Tags beizubehalten. Jeder
Leerraum
erzeugt einen #text-Knoten, von einem einzelnen Leerzeichen bis zu mehreren Leerzeichen, Zeilenumbrüchen,
Tabs und so weiter.
Ein weiterer #text-Knoten wird zwischen den schließenden
</span>- und </p>-Tags eingefügt.
Wenn dieser Leerraum aus dem Quelltext 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 zeigt die Konsole 'SPAN' an.
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① |
Browser-Kompatibilität
Loading…