La proprietà firstChild in Javascript

La proprietà firstChild mi permette di accedere al primo figlio di un nodo nel DOM.

oggetto.firstChild

Dove "oggetto" è un nodo del DOM (Document Object Model).

Il metodo restituisce il primo figlio del nodo all'interno della struttura ad albero.

Cos'è un nodo? Un "nodo" può essere qualsiasi elemento della pagina, come un paragrafo, una lista, un'immagine, o anche un nodo di testo (come il contenuto effettivo di un elemento).

Un esempio pratico

Considero questa semplice pagina web

<html>
<body>
<div id="mioDiv"><b>Parola 1</b>
<u>Parola 2</u>
</div>
<script>
var container = document.getElementById('mioDiv');
var primoFiglio = container.firstChild;
document.write("Primo figlio (firstChild): " + primoFiglio.nodeName + "<br>");
</script>
</body>
</html>

Lo script cerca un elemento con id=mioDiv tramite il metodo document.getElementById('mioDiv') e lo memorizza nella variabile "container".

Poi utilizza la proprietà firstChild per trovare il primo nodo figlio di questo nodo e stampa il nome sullo schermo.

In questo caso il primo figlio del nodo è B ovvero il tag <b>.

Un aspetto importante da ricordare è che la proprietà firstChild considera tutti i tipi di nodi, inclusi i nodi di testo (spazi bianchi, a capo, ecc.).

Questo significa che, a volte, firstChild può restituire un nodo di testo (#text) invece di un elemento HTML.

Ad esempio, se inserisco un ritorno a capo dopo il tag <div>, il risultato finale cambia.

<html>
<body>
<div id="mioDiv">
<b>Parola 1</b>
<u>Parola 2</u>
</div>
<script>
var container = document.getElementById('mioDiv');
var primoFiglio = container.firstChild;
document.write("Primo figlio (firstChild): " + primoFiglio.nodeName + "<br>");
</script>
</body>
</html>

In questo caso la proprietà firstChild trova come primo figlio del nodo il carattere che indica il ritorno a capo.

Pertanto, restituisce #text come risultato anziché B.

#text

Per evitare questo problema con i nodi di testo, posso utilizzare la proprietà firstElementChild che restituisce il primo nodo che è effettivamente un elemento, ignorando i nodi di testo.

E così via