Comprensione 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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.22
Comprensione 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.js
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.js
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.js
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.js
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.css
index.js
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;
?
Grazie per i tuoi commenti!