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:
<div id="elem"><!--com-->text<span>tag</span></div>
Otteniamo un riferimento a questo div in una variabile:
let elem = document.querySelector('#elem');
E ora diamo un'occhiata a cosa contengono
le proprietà firstChild e firstElementChild:
console.log(elem.firstChild); // commento
console.log(elem.firstElementChild); // tag span
Scrivi del codice che mostri la differenza tra
lastChild e lastElementChild.
Scrivi del codice che mostri la differenza tra
nextSibling e nextElementSibling.
Scrivi del codice che mostri la differenza tra
previousSibling e previousElementSibling.
