Lavorare con i nodi in JavaScript

Come sapete, i tag possono contenere altri tag o, in termini JavaScript, gli elementi DOM possono contenere altri elementi DOM. Tuttavia, oltre a ciò, possono contenere commenti e testo normale. Commenti, testi ed elementi DOM sono uniti da un unico nome: nodi.

Conosci già le proprietà firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Queste proprietà lavorano specificamente con elementi DOM, ignorando tutti gli altri nodi. Di solito, è proprio ciò di cui abbiamo bisogno.

Tuttavia, esistono anche le proprietà firstChild, lastChild, nextSibling, previousSibling. Queste proprietà funzionano in modo analogo, ma tengono conto di tutti i nodi. Diamo un'occhiata alla differenza tra queste proprietà con un esempio. Supponiamo di avere un div che contiene tre nodi:

html<div id="elem"><!--com-->text<span>tag</span></div>

Otteniamo un riferimento a questo div in una variabile:

javascriptlet elem = document.querySelector('#elem');

E ora diamo un'occhiata a cosa contengono le proprietà firstChild e firstElementChild:

javascriptconsole.log(elem.firstChild);        // commento
console.log(elem.firstElementChild); // tag span