JavaScript/DOM/Node/firstChild

Die Eigenschaft Node.firstChild speichert das Objekt des ersten Kindknotens eines Knotens.

Syntax

let childNode = node.firstChild;

Anwendungsbeispiel ansehen …

  function init() {
       var ersterPunkt = document.getElementsByTagName('ul')[0].firstChild,
	       ausgabe = ersterPunkt.firstChild.data;
       document.getElementById('ausgabe').textContent = ausgabe;
  }

Im JavaScript-Bereich wird mit document.getElementsByTagName('ul')[0] auf das erste ul-Element im Dokument zugegriffen. Mit firstChild wird dessen erster Kindknoten angesprochen. Im Beispiel ist dies das erste li-Element.

In der Variablen ersterPunkt ist also anschließend das Knotenobjekt des ersten li-Elements gespeichert, aber nicht sein Textinhalt. Dieser wird jedoch anschließend ausgegeben. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten darstellt, kann mit ersterPunkt.firstChild.data auf den Text des ersten Listenpunktes zugegriffen werden. }}}}

Beachten Sie: Gemäß dem DOM stellt bereits ein Zeilenumbruch oder ein Leerzeichen im Quelltext zwischen Elementknoten (so genannnter Whitespace) einen eigenen Text-Kindknoten dar. Auch HTML-Kommentare sind eigene Knoten. Daran halten sich alle gängigen Browser.

Siehe auch

Mit den Eigenschaften des Node-Objekts werden alle Knoten - auch Textknoten (evtl. sogar mit Whitespace) - ermittelt. Meist will man aber nur Elementknoten ansprechen. Hier haben andere Schnittstellen bessere Methoden, die die gewünschten Elemente herausfiltern:

parentNode→parentElementpreviousSibling→previousElementSiblingnextSibling → nextElementSiblingchildNodes→children (alle Kindelemente)firstChild→firstElementChildlastChild→lastElementChild

Weblinks

• W3C: firstChild
• MDN: Node.firstChild