La proprietà firstElementChild in Javascript

La proprietà firstElementChild del linguaggio Javascript mi consente l'accesso all'elemento iniziale di un nodo nel DOM.

oggetto.firstElementChild

Qui "oggetto" rappresenta un nodo del DOM (Document Object Model).

Questa proprietà seleziona il primo elemento all'interno dell'organizzazione gerarchica del nodo.

Che cos'è un elemento? Un "elemento" può essere qualsiasi parte della pagina web, come una sezione, un elenco, un'immagine, oppure un contenuto testuale (il testo presente all'interno di un elemento). A differenza del metodo firstChild, il metodo firstElementChild ignora i nodi di testo.

Esempio applicativo

Esaminiamo un esempio di pagina web semplice:

<html>
<body>
<div id="mioDiv"><b>Parola 1</b>
<u>Parola 2</u>
</div>
<script>
var contenitore = document.getElementById('mioDiv');
var primoElemento = contenitore.firstElementChild;
document.write("Primo elemento (firstElementChild): " + primoElemento.nodeName + "<br>");
</script>
</body>
</html>

Lo script identifica un elemento con id=mioDiv attraverso document.getElementById('mioDiv'), assegnandolo alla variabile "contenitore".

Successivamente, impiega firstElementChild per ottenere il primo elemento figlio di questo nodo e ne visualizza il nome.

In questa situazione, il primo elemento del nodo è B, corrispondente al tag <b>.

È importante ricordare che firstElementChild seleziona solamente elementi HTML, escludendo i nodi testuali (spazi bianchi, a capo, ecc.).

Di conseguenza, se si inserisce un ritorno a capo dopo il tag <div>, il risultato non cambia.

<html>
<body>
<div id="mioDiv">
<b>Parola 1</b>
<u>Parola 2</u>
</div>
<script>
var contenitore = document.getElementById('mioDiv');
var primoElemento = contenitore.firstElementChild;
document.write("Primo elemento (firstElementChild): " + primoElemento.nodeName + "<br>");
</script>
</body>
</html>

In questo caso, firstElementChild ignora il carattere di ritorno a capo e continua a restituire B come risultato.

Per ovviare a problemi legati ai nodi testuali, firstElementChild si rivela un'alternativa più affidabile, concentrando l'attenzione esclusivamente sugli elementi HTML.

E così via