JavaScript Academy · Lezione

Attraversare genitori, figli e fratelli

Navighi nell'albero DOM tra nodi correlati.

Attraversare genitori, figli e fratelli è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Perché attraversare il DOM

Una volta ottenuto un elemento, spesso servono gli elementi a esso collegati: il contenitore che lo racchiude, gli elementi al suo interno o quello immediatamente adiacente. Le proprietà per attraversare il DOM consentono di spostarsi nell'albero.

parentElement

parentElement restituisce l'elemento che contiene quello corrente oppure null quando ci si trova alla radice dell'albero.

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

children

children è una HTMLCollection live degli elementi figli diretti di un elemento; i nodi di testo sono esclusi.

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild e lastElementChild

Queste proprietà portano direttamente al primo o all'ultimo elemento figlio, ignorando i nodi di testo e di commento.

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

nextElementSibling restituisce l'elemento immediatamente successivo a quello corrente all'interno dello stesso genitore.

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

previousElementSibling si sposta nella direzione opposta. Entrambe le proprietà restituiscono null quando non esiste alcun elemento fratello.

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

Proprietà degli elementi e dei nodi

Attenzione: childNodes, nextSibling e parentNode includono i nodi di testo, compresi gli spazi bianchi. Di solito le versioni *Element* sono quelle desiderate.

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

closest risale l'albero a partire dall'elemento corrente e restituisce l'antenato più vicino, o l'elemento stesso, che corrisponde a un selettore.

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

closest per la delega degli eventi

closest è perfetto quando un clic raggiunge un elemento interno, ma serve il contenitore esterno che lo gestisce.

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

matches verifica se l'elemento stesso soddisfa un selettore e restituisce un valore booleano. È utile insieme alle proprietà per attraversare il DOM.

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

Combinare l'attraversamento

È possibile concatenare i passaggi di attraversamento per navigare in strutture complesse, ad esempio da un pulsante verso la riga che lo contiene e poi alla riga successiva.

const next = btn.closest("tr").nextElementSibling;

Verifica rapida

Scelga la proprietà corretta.

Riepilogo

Può spostarsi verso l'alto con parentElement e closest, verso i figli con children, firstElementChild e lastElementChild, e lateralmente con nextElementSibling e previousElementSibling. Preferisca le proprietà che considerano solo gli elementi per ignorare i nodi di testo composti da spazi bianchi.

Domande Frequenti

La lezione «Attraversare genitori, figli e fratelli» è gratuita?

Sì — il testo completo di «Attraversare genitori, figli e fratelli» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Attraversare genitori, figli e fratelli»?

Navighi nell'albero DOM tra nodi correlati. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Attraversare genitori, figli e fratelli»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy