L'attraversamento del DOM consiste nello spostarsi attraverso la struttura del documento utilizzando JavaScript per accedere, modificare o interagire con diversi nodi. Il DOM è strutturato come un albero con nodi collegati in una gerarchia, che include relazioni di genitore, figlio e fratello:

• Nodo genitore: Un nodo che contiene altri nodi al suo interno;
• Nodi figli: Nodi direttamente all'interno di un nodo genitore;
• Nodi fratelli: Nodi che condividono lo stesso genitore e si trovano allo stesso livello.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

In questa struttura:

• <ul> è il genitore degli elementi <li>;
• Ogni <li> è un figlio di <ul>;
• I due elementi <li> sono fratelli tra loro.

Navigazione del DOM

JavaScript fornisce diverse proprietà per navigare tra queste relazioni, consentendo di spostarsi tra i nodi in modo efficiente.

ParentNode

La proprietà parentNode consente di accedere al nodo genitore di quello corrente. È utile quando è necessario risalire l'albero DOM.

In questo esempio, parentNode accede al genitore <ul> dell'elemento <li> selezionato e aggiunge un bordo all'intera lista.

ChildNodes

La proprietà childNodes restituisce una raccolta di tutti i nodi figli di un determinato elemento, inclusi i nodi di testo (spazi vuoti tra gli elementi).

Questo esempio seleziona la lista delle attività e scorre i suoi figli, aggiungendo un padding a ciascun elemento <li>.

FirstChild e LastChild

firstChild: Accede al primo figlio di un elemento, inclusi i nodi di testo.
lastChild: Accede all'ultimo figlio di un elemento, inclusi i nodi di testo.

Supponiamo di dover evidenziare il primo e l'ultimo elemento in un carrello della spesa.

Questo esempio evidenzia il primo e l'ultimo elemento in una lista, dimostrando come accedere e modificare il primo e l'ultimo nodo.

Poiché firstChild e lastChild spesso fanno riferimento a nodi di testo (come spazi vuoti) invece che ai veri nodi elemento (<li>), un approccio migliore è utilizzare firstElementChild e lastElementChild, che selezionano specificamente il primo e l'ultimo elemento figlio, ignorando eventuali nodi di testo.

PreviousSibling e NextSibling

nextSibling: Recupera il nodo fratello successivo del nodo corrente.
previousSibling: Recupera il nodo fratello precedente del nodo corrente.

Considerare la navigazione tra le attività in una lista di cose da fare, contrassegnando le attività come "prossima" o "completata in precedenza."

In questo scenario:

• nextSibling si sposta sull'attività successiva e la contrassegna come "prossima";
• previousSibling contrassegna l'attività precedente come completata.

Tuttavia, nextSibling e previousSibling spesso puntano a nodi di testo (come spazi vuoti). Per selezionare effettivamente i nodi elemento (<li>), è preferibile utilizzare nextElementSibling e previousElementSibling, che saltano specificamente i nodi di testo.

Esempio pratico: Gestore di attività

Immagina di costruire un gestore di attività in cui gli utenti possono aggiungere, evidenziare e gestire le attività. Si desidera aggiornare dinamicamente le attività, contrassegnare la prima attività come "prioritaria", evidenziare la successiva come "in arrivo" e contrassegnare l'ultima come "completata". Questo esempio dimostrerà come navigare nel DOM utilizzando parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling e previousElementSibling.

Quando si clicca sul pulsante "Evidenzia attività", JavaScript applica stili distinti alle attività in base alla loro posizione. firstElementChild contrassegna la prima attività come "Prioritaria" con uno stile grassetto e giallo. lastElementChild contrassegna l'ultima attività come "Completata" con effetti verdi e barrati. nextElementSibling evidenzia la seconda attività come "In arrivo" in blu e, se esiste un fratello precedente, viene applicato un bordo blu.