Come precedentemente evidenziato nella parte sinistra del pannello Elements viene visualizzato il DOM della pagina web, ossia il suo codice HTML così come lo vede il browser, organizzato all’interno di una ben precisa struttura gerarchica ad albero dove ogni elemento HTML presente nella pagina rappresenta un ben preciso nodo della struttura stessa.

Questa struttura ad albero può essere facilmente navigata utilizzando indifferentemente il mouse o la tastiera.

In particolare:

• Per espandere un nodo chiuso . è sufficiente cliccare due volte sul nodo stesso oppure agire sulla piccola freccia posta a fianco del nodo stesso
• Per chiudere un nodo aperto è sufficiente cliccare due volte sul nodo stesso oppure agire ancora una volta tramite la piccola freccia posta a fianco del nodo stesso

Una volta aperto/chiuso un nodo è poi possibile aprire/chiudere eventuali nodi figlio/padre agendo semplicemente da tastiera con il tasto freccia destra/sinistra

Un’altra possibilità di navigazione tra gli elementi della pagina web è data poi dalle briciole di pane poste nella parte bassa del pannello Elements

E’ sufficiente cliccare sull’elemento desiderato per evidenziarne il markup HTML all’interno del pannello Elements