Comprendere il DOM è essenziale nella tua carriera di sviluppatore web. Dovresti sapere come selezionare diversi elementi nel DOM, in modo da poterne leggere i contenuti o modificarli.

L'attraversamento del DOM descrive come navigare nella struttura ad albero generata dai documenti HTML. Ecco una guida completa su come attraversare il DOM con JavaScript.

Che cos'è l'attraversamento DOM?

IL Modello a oggetti documento, o DOM in breve, è una rappresentazione ad albero di un documento HTML. Fornisce un API che ti consente, come sviluppatore web, di interagire con un sito web utilizzando JavaScript.

Ogni elemento nel DOM è noto come nodo. Solo attraverso il DOM puoi manipolare la struttura, il contenuto e lo stile del tuo documento HTML.

L'attraversamento DOM (chiamato anche camminare o navigare nel DOM) è l'atto di selezionare i nodi nell'albero DOM da altri nodi. Probabilmente hai già familiarità con diversi metodi per accedere agli elementi nell'albero DOM per ID, classe o nome tag. Puoi usare metodi come documento.querySelector() E documento.getElementById() fare così.

instagram viewer

Esistono altri metodi che puoi utilizzare insieme per navigare nel DOM in modi più efficienti e robusti. Come puoi immaginare, è meglio cercare da un punto già noto su una mappa che fare una ricerca completa.

Ad esempio, selezionare un elemento figlio dal suo genitore è più semplice ed efficiente che cercarlo nell'intero albero.

Un documento di esempio da attraversare

Una volta che hai accesso a un determinato nodo nell'albero DOM, puoi accedere ai suoi nodi correlati in diversi modi. Puoi spostarti verso il basso, verso l'alto o lateralmente nell'albero DOM dal nodo selezionato.

Il primo metodo prevede la ricerca di un elemento che inizia con un nodo più in alto (come il nodo del documento) e si sposta verso il basso.

Il secondo modo è l'opposto: ti sposti da un elemento interno su per l'albero, alla ricerca di un elemento esterno. L'ultimo metodo è quando cerchi un elemento da un altro elemento allo stesso livello (il che significa che i due elementi sono fratelli) nell'albero del documento.

Per dimostrare, considera questo documento HTML di esempio:

<!DOCTYPE html>
<html lang="it">
<Testa>
<meta set di caratteri="UTF-8" />
<meta http-equiv="Compatibile con X-UA" contenuto="IE=bordo" />
<nome meta="finestra" contenuto="width=larghezza-dispositivo, scala-iniziale=1.0" />
<titolo>Pagina di esempio</title>
</head>
<corpo>
<principale>
<h1>Titolo della mia pagina</h1>
<P>Bella didascalia va qui</P>


<classe articolo="primo_articolo">
<h2>Elenco di frutti sorprendenti</h2>
<P>Deve mangiare frutta</P>


<classe div="involucro-1">
<classe ul="elenco di mele">
<li class="mela">Mele</li>
<li class="arancia">Arance</li>
<li class="avocado">Avocado</li>
<li class="uva">
 Uva


<Ul>
<li class="tipo 1">Gocce di luna</li>
<li>Sultanina</li>
<li>Concordia</li>
<li>cremisi senza semi</li>
</ul>
</li>
<li class="banana">Banane</li>
</ul>


<classe pulsante="btn-1">Leggi l'elenco completo</button>
</div>
</article>


<classe articolo="secondo_articolo">
<h2>Posti incredibili in Kenya</h2>
<P>Deve visitare i posti in Kenya</P>


<classe div="involucro-2">
<classe ul="lista dei luoghi">
<li>Maasai Mara</li>
<li>Diani Beach</li>
<li>Watamu Beach</li>
<li>Parco nazionale dell'Amboseli</li>
<li>Lago Nakuru</li>
</ul>


<classe pulsante="btn-2">Leggi l'elenco completo</button>
</div>
</article>
</main>
</body>
</html>

Attraversando il DOM verso il basso

Puoi attraversare il DOM verso il basso usando uno dei due metodi. Il primo è il metodo di selezione comune (elemento.querySelector O element.querySelectorAll). In secondo luogo, puoi utilizzare il bambini O childNodes proprietà. Ci sono anche altre due proprietà speciali, vale a dire, ultimo bambino E Primogenito.

Utilizzo dei metodi di selezione

I metodi querySelector() consentono di cercare uno o più elementi che corrispondono a un determinato selettore. Ad esempio, puoi cercare il primo elemento con una classe "first-article" utilizzando document.querySelector('.primo-articolo'). E per recuperare tutto h2 elementi nel documento, è possibile utilizzare il querySelectorAll metodo: document.querySelectorAll('h2'). IL querySelectorAll metodo restituisce un elenco di nodi di elementi corrispondenti; puoi selezionare ogni elemento usando la notazione tra parentesi:

cost intestazioni = documento.querySelectorAll('h2');
cost firstHeading = intestazioni[0]; // selezionando il primo elemento h2
cost secondHeading = titoli[1]; // selezionando il secondo elemento h2

Il problema principale quando si utilizzano i metodi di selezione è che è necessario utilizzare i simboli appropriati, ove applicabile, prima del selettore come si fa nei CSS. Ad esempio, ".classname" per le classi e "#id" per gli ID.

Ricorda che il risultato sarà un elemento HTML, non solo il contenuto interno dell'elemento selezionato. Per accedere al contenuto è possibile utilizzare il file node's innerHTML proprietà:

documento.querySelector('.orange').innerHTML

Utilizzo dei figli o delle proprietà childNodes

IL bambini La proprietà seleziona tutti gli elementi figlio che si trovano direttamente sotto un dato elemento. Ecco un esempio di bambini proprietà in azione:

cost lista mele = documento.querySelector('.apple-list');
cost mele = listamele.bambini; 
consolare.log (mele);

Registrazione mele alla console visualizzerà un insieme di tutti gli elementi dell'elenco direttamente sotto l'elemento con una classe "apple-list" come una raccolta HTML. Una raccolta HTML è un oggetto simile a un array, quindi puoi utilizzare la notazione tra parentesi per selezionare gli elementi, come con querySelectorAll.

non mi piace il bambini proprietà, childNodes restituisce tutti i nodi figlio diretti (non solo gli elementi figlio). Se sei interessato solo agli elementi figli, ad esempio solo agli elementi dell'elenco, usa il bambini proprietà.

Uso delle proprietà speciali lastChild e firstChild

Questi due metodi non sono robusti come i primi due. Come suggeriscono i loro nomi, il ultimo bambino E Primogenito properties restituiscono l'ultimo e il primo nodo figlio di un elemento.

cost lista mele = documento.querySelector('.apple-list');
cost firstChild = appleList.firstChild;
cost lastChild = appleList.lastChild;

Attraversando il DOM verso l'alto

Puoi navigare nel DOM usando il file parentElement (O parentNode) E più vicina proprietà.

Utilizzando parentElement o parentNode

Entrambi parentElement O parentNode le proprietà consentono di selezionare il nodo padre dell'elemento selezionato di un livello superiore. La differenza fondamentale è che parentElement sceglie solo il nodo genitore che è un elemento. D'altra parte, parentNode può selezionare un genitore indipendentemente dal fatto che si tratti di un elemento o di un diverso tipo di nodo.

Nell'esempio di codice seguente, usiamo parentElement per selezionare il div con la classe "wrapper-1" da "apple-list":

cost lista mele = documento.querySelector('.apple-list');
cost parentDiv = appleList.parentElement; 
consolare.log (parentDiv); // visualizza l'elemento div con il wrapper di classe-1

Usando la proprietà più vicina

IL più vicina property seleziona il primo elemento padre che corrisponde a un selettore specificato. Ti consente di selezionare più livelli invece di uno. Ad esempio, se abbiamo già selezionato il pulsante con la classe "btn-1", possiamo selezionare il principale elemento utilizzando il più vicina proprietà come segue:

cost btn1 = documento.querySelector('.btn-1');
const mainEl = btn1.closest('principale');
consolare.log (mainEl); // visualizza l'elemento principale

Come querySelector E querySelectorAll, utilizzare i selettori appropriati nel file più vicina metodo.

Attraversare il DOM lateralmente

Ci sono due metodi disponibili per percorrere lateralmente il DOM. Puoi usare nextElementSibling O precedenteElementSibling. Utilizzo nextElementSibling per selezionare il seguente elemento di pari livello e precedenteElementSibling per selezionare il fratello precedente.

cost arancione = documento.querySelector('.orange');
cost mela = arancione.previousElementSibling;
cost avocado = orange.nextElementSibling;

Ci sono anche equivalenti successivoFratello E precedenteSibling proprietà che selezionano anche da tutti i tipi di nodo, non solo dagli elementi.

Fai di più concatenando proprietà e metodi di attraversamento DOM

Tutti i metodi e le proprietà di cui sopra possono consentire di selezionare qualsiasi nodo nel DOM. Tuttavia, in alcuni casi, potresti voler muoverti prima in alto, poi in basso o lateralmente. In tal caso, concatenare diverse proprietà insieme si rivelerà utile.