La proprietà lastElementChild di javascript

In javascript, lastElementChild è una proprietà che restituisce l'ultimo elemento figlio di un nodo specificato, escludendo nodi di testo e commenti.

nodoGenitore.lastElementChild

Questa proprietà è utilizzata per operare sugli elementi Html del DOM (Document Object Model).

La proprietà lastElementChild identifica l'ultimo elemento figlio in un nodo genitore.

Se non ci sono elementi figli, lastElementChild restituisce 'null', ovvero un valore di ritorno nullo.

Nota: lastElementChild è particolarmente utile per manipolare elementi HTML specifici all'interno del DOM in javascript, fornendo un controllo più preciso rispetto a lastChild che, invece, considera anche i commenti e i nodi di testo.

Illustro il tutto con un esempio pratico.

Creo una pagina web molto semplice.

<html>
<body>
<div id="container">
Testo di esempio
<span>Elemento span</span>
</div>
<script>
var container = document.getElementById("container");
var ultimoElemento = container.lastElementChild;
document.write(ultimoElemento);
</script>
</body>
</html>

Lo script individua il nodo genitore con id=container usando getElementById(). Si riferisce al tag <div>.

Poi, applica la proprietà lastElementChild per trovare l'ultimo elemento figlio.

In questo esempio, l'ultimo elemento è il tag <span>.

[object HTMLSpanElement]

È importante notare che lastElementChild ignora sia i nodi di testo che i commenti, concentrandosi esclusivamente sugli elementi HTML.

La scelta tra lastChild e lastElementChild dipende dalle esigenze specifiche: lastElementChild per ignorare nodi di testo e commenti, lastChild per includerli.

Verifica della presenza di nodi figli

Per capire se un nodo genitore ha nodi figli, in genere utilizzo una struttura condizionale come questa:

if (container.lastElementChild) {
// Operazioni sull'ultimo elemento
} else {
console.log("Nessun elemento figlio trovato.");
}

Questa verifica mi consente di verificare l'effettiva presenza di elementi figli in un nogo genitore, prima di procedere con le operazioni sul DOM.

E così via.