Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Comprensione della Gerarchia e delle Relazioni del DOM | Manipolazione del DOM per lo Sviluppo Web Interattivo
Padronanza Avanzata di JavaScript

bookComprensione della Gerarchia e delle Relazioni del DOM

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.

index.html

index.html

index.js

index.js

copy

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).

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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."

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Nel DOM, che cos'è un "nodo genitore"?

2. Quale proprietà useresti per accedere a tutti i nodi figli di un elemento, inclusi i nodi di testo?

3. Nel seguente codice, quale sarà l'output di currentTask.previousElementSibling.textContent;?

question mark

Nel DOM, che cos'è un "nodo genitore"?

Select the correct answer

question mark

Quale proprietà useresti per accedere a tutti i nodi figli di un elemento, inclusi i nodi di testo?

Select the correct answer

question mark

Nel seguente codice, quale sarà l'output di currentTask.previousElementSibling.textContent;?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 4

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.22

bookComprensione della Gerarchia e delle Relazioni del DOM

Scorri per mostrare il menu

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.

index.html

index.html

index.js

index.js

copy

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).

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.js

index.js

copy

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."

index.html

index.html

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Nel DOM, che cos'è un "nodo genitore"?

2. Quale proprietà useresti per accedere a tutti i nodi figli di un elemento, inclusi i nodi di testo?

3. Nel seguente codice, quale sarà l'output di currentTask.previousElementSibling.textContent;?

question mark

Nel DOM, che cos'è un "nodo genitore"?

Select the correct answer

question mark

Quale proprietà useresti per accedere a tutti i nodi figli di un elemento, inclusi i nodi di testo?

Select the correct answer

question mark

Nel seguente codice, quale sarà l'output di currentTask.previousElementSibling.textContent;?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 4
some-alt