HTML5 - Navigazione ad albero DOM

All'interno di un documento HTML Possiamo navigare tra i diversi elementi che appartengono all'albero DOM, per questo abbiamo la struttura gerarchica e possiamo utilizzare più metodi con cui possiamo avvicinarci alle relazioni dei documenti.
Naviga nell'albero DOM
Come accennato, la navigazione può avvenire attraverso la struttura gerarchica visualizzando lo schema come un albero, in questo modo possiamo trattare gli elementi come genitori, figli, fratelli.
Con questo, la ricerca di un elemento può essere fatta seguendo la filosofia della ricerca per relazione.
Vediamo le modalità disponibili prima di passare alle applicazioni pratiche:

· childNode: Restituisce tutti gli elementi figlio dell'elemento padre.

· Primogenito: Restituisce l'elemento che è il primo figlio di un elemento padre.

· hasChildNodes(): Restituisce vero o vero se l'elemento corrente ha nodi figlio.

· ultimo bambino: Restituisce l'ultimo figlio di un elemento nel documento.

· successivoFratello: Restituisce l'elemento di pari livello definito dall'elemento HTML corrente.

· genitoreNodo: Restituisce l'elemento padre dell'elemento HTML corrente.

· precedenteFratello: Restituisce l'elemento di pari livello prima dell'elemento HTML corrente.

Una volta che sappiamo quali metodi abbiamo a disposizione, vedremo un semplice esempio di codice con il quale capiremo di cosa tratta la navigazione. albero DOM.

 Esempio 

Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.
 
Uno degli aspetti più interessanti della frutta è la varietà disponibile in ogni paese. Vivo vicino a Londra, in una zona nota per le sue mele.

Genitore Primo figlio Fratello precedente Fratello successivo

Ciò che questo codice ottiene è essere in grado di navigare tra gli elementi e una volta che li ombreggia in grigio chiaro per poter distinguere in quale parte del documento ci troviamo, vediamo nell'immagine come dovremmo vederlo nel nostro browser:

Come possiamo vedere, questo modo di posizionare gli elementi all'interno del DOM ci aiuta quando non siamo sicuri degli identificatori o quando si tratta di una struttura dinamica ma definita.
Con questo abbiamo terminato questo tutorial, dove siamo stati in grado di cercare elementi in un documento HTML senza fare affidamento su identificatori o nomi di elementi, semplicemente usando la loro relazione nella struttura gerarchica.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo