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 unmittelbaren Kinder zurück.
Hinweis: Diese Eigenschaft gibt jeden Knoten zurück, der der erste Nachkomme 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 keine vorhanden sind.
Beispiel
Dieses Beispiel demonstriert die Verwendung von firstChild
und wie Whitespace-Knoten
die Verwendung dieser Eigenschaft beeinträchtigen könnten.
<p id="para-01">
<span>First span</span>
</p>
<script>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
</script>
Im obigen Beispiel zeigt die Konsole '#text' an,
weil ein Textknoten eingefügt wird, um den Whitespace zwischen dem Ende der
öffnenden <p>
und <span>
Tags beizubehalten. Jeder
Whitespace
erzeugt einen #text
Knoten, von einem einzelnen Leerzeichen bis zu mehreren Leerzeichen, Zeilenumbrüchen,
Tabulatoren und so weiter.
Ein weiterer #text
Knoten wird zwischen den schließenden
</span>
und </p>
Tags eingefügt.
Wenn dieser Whitespace aus der Quelle entfernt wird, werden keine #text-Knoten eingefügt und das
span
-Element wird zum ersten Kind des Absatzes.
<p id="para-01"><span>First span</span></p>
<script>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
</script>
Nun 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 Standard # ref-for-dom-node-firstchild① |
Browser-Kompatibilität
BCD tables only load in the browser