Tecniche efficienti di attraversamento del DOM
Padroneggiare metodi come .closest(), .siblings(), .find() e .parentsUntil() per navigare in modo efficiente nell'albero DOM ed evitare colli di bottiglia nelle prestazioni.
Tecniche efficienti di attraversamento del DOM è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Navigare nell'albero del DOM
Benvenuto! In questa lezione imparerà a padroneggiare tecniche efficienti per spostarsi nel Document Object Model (DOM).
Il DOM è come un albero genealogico degli elementi della pagina web. Capire come attraversarlo consente di selezionare gli elementi con precisione, anche senza ID o classi direttamente disponibili.
- Attraversare: spostarsi o muoversi attraverso qualcosa.
- DOM: la rappresentazione interna della struttura HTML da parte del browser.
Trovare gli elementi discendenti con .find()
Il metodo .find() è perfetto per individuare gli elementi discendenti. Cerca *all'interno* degli elementi attualmente selezionati tutte le corrispondenze.
Lo si può immaginare come la ricerca di oggetti specifici all'interno di una determinata scatola. È molto utile per restringere la ricerca.
- Sintassi:
$(selector).find(filterSelector) - Restituisce: un nuovo oggetto jQuery contenente gli elementi discendenti trovati.
.find() in azione
Troviamo tutti gli elementi dell'elenco (<li>) all'interno di uno specifico elenco non ordinato (<ul>).
Provi a eseguire il codice e osservi quali elementi ricevono uno sfondo verde!
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>Risalire con .closest()
A volte è necessario trovare un antenato (un genitore, un nonno o un altro elemento superiore) di un elemento. Il metodo .closest() fa esattamente questo.
Parte dall'elemento corrente e risale *verso l'alto* nell'albero del DOM, restituendo il *primo* antenato che corrisponde al selettore fornito.
- Sintassi:
$(selector).closest(filterSelector) - Restituisce: un oggetto jQuery contenente l'unico antenato più vicino.
.closest() in azione
Immagini di fare clic su un pulsante in profondità all'interno di una struttura annidata. Vuole trovare il contenitore principale. .closest() è perfetto per questo scopo.
Faccia clic sul pulsante qui sotto per evidenziare il suo antenato <div> più vicino.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>Esplorare gli elementi fratelli con .siblings()
Gli elementi che si trovano allo stesso livello nell'albero del DOM sono chiamati "fratelli". Il metodo .siblings() consente di selezionarli tutti.
Individua tutti gli elementi che condividono lo stesso genitore dell'elemento corrente, *escludendo* l'elemento corrente stesso.
- Sintassi:
$(selector).siblings(filterSelector) - Restituisce: un nuovo oggetto jQuery con tutti gli elementi fratelli.
.siblings() in azione
Evidenziamo tutti gli elementi fratelli di un elemento specifico dell'elenco quando si fa clic su di esso. È utile per elenchi o menu interattivi.
Faccia clic su un elemento qualsiasi dell'elenco per vedere cambiare colore ai suoi fratelli!
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>Risalire con .parentsUntil()
E se volesse selezionare *più* antenati, ma fermarsi a un determinato punto? È qui che .parentsUntil() risulta utile.
Questo metodo risale l'albero del DOM, selezionando tutti gli antenati dell'elemento corrente *fino a* raggiungere un elemento specificato dal selettore. L'elemento di arresto non viene incluso.
- Sintassi:
$(selector).parentsUntil(stopSelector, filterSelector) - Restituisce: un oggetto jQuery con gli antenati selezionati.
.parentsUntil() in azione
Abbiamo una struttura profondamente annidata. Selezioniamo tutti gli elementi genitori di uno <span> fino a raggiungere uno specifico <div class="container">.
Esegua questo esempio per vedere quali elementi ricevono un bordo, ma noti che lo stesso div 'container' viene escluso!
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>Verifica rapida
Ha un elemento <img> annidato all'interno di un <div class="gallery-item">, che a sua volta si trova dentro un <div class="gallery-row">. Selezionando l'elemento <img>, quale metodo jQuery userebbe per ottenere *solo* il <div class="gallery-item">?
Riepilogo: attraversamento efficiente del DOM
Ottimo lavoro! Ha acquisito padronanza dei principali metodi jQuery per attraversare il DOM in modo efficiente:
.find(): cerca *all'interno* degli elementi i discendenti..closest(): trova l'*antenato più vicino* che corrisponde a un selettore, risalendo l'albero..siblings(): seleziona tutti gli elementi allo *stesso livello* di quello corrente (escludendo quest'ultimo)..parentsUntil(): seleziona più antenati *fino a* un elemento di arresto specificato (senza includerlo).
Usare questi metodi con criterio aiuta a scrivere codice jQuery più preciso, performante e leggibile per applicazioni web dinamiche!
Domande Frequenti
La lezione «Tecniche efficienti di attraversamento del DOM» è gratuita?
Sì — il testo completo di «Tecniche efficienti di attraversamento del DOM» è 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 jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Tecniche efficienti di attraversamento del DOM»?
Padroneggiare metodi come .closest(), .siblings(), .find() e .parentsUntil() per navigare in modo efficiente nell'albero DOM ed evitare colli di bottiglia nelle prestazioni. Eserciti jQuery 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 jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery 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 3.
Quanto tempo richiede la lezione «Tecniche efficienti di attraversamento del DOM»?
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 jQuery Academy?
Sì. Ogni lezione jQuery 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
- Selettori avanzati per attributi
- Pseudo-classi e selettori personalizzati
- Tecniche efficienti di attraversamento del DOM