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.

html
<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.

html
<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

Siehe auch