Inizia a visualizzare e modificare il DOM

Guarda il video e completa questi tutorial interattivi per apprendere le nozioni di base sulla visualizzazione e sulla modifica del DOM di una pagina utilizzando Chrome DevTools.

Questo tutorial presuppone che tu conosca la differenza tra DOM e HTML. Consulta Appendice: HTML e DOM per una spiegazione.

Visualizza nodi DOM

La struttura DOM del riquadro Elementi consente di eseguire tutte le attività relative al DOM in DevTools.

Ispeziona un nodo

Quando ti interessa un determinato nodo DOM, Ispeziona è un modo rapido per aprire DevTools ed esaminare il nodo.

1. Fai clic con il tasto destro del mouse su Michelangelo qui sotto e seleziona Ispeziona.
   • Michelangelo
   • Raffaello Si apre il riquadro Elementi di DevTools. L'elemento <li>Michelangelo</li> è evidenziato nella struttura DOM.
2. Fai clic sull'icona Ispeziona nell'angolo in alto a sinistra di DevTools.

3. Fai clic sul testo Tokyo di seguito.

   • Tokyo

   • Beirut

     Ora <li>Tokyo</li> è evidenziato nell'albero DOM.

L'ispezione di un nodo è anche il primo passo per visualizzare e modificare gli stili di un nodo. Consulta la Guida introduttiva alla visualizzazione e alla modifica del codice CSS.

Navigare nell'albero DOM con una tastiera

Dopo aver selezionato un nodo nell'albero DOM, puoi spostarti all'interno dell'albero DOM con la tastiera.

1. Fai clic con il tasto destro del mouse su Ringo qui sotto e seleziona Ispeziona. L'opzione <li>Ringo</li> è selezionata nell'albero DOM.

   • George
   • Ringo
   • Paul

   • John

     

2. Premi due volte il tasto Freccia su Su. Opzione <ul> selezionata.

   

3. Premi il tasto Freccia sinistra. L'elenco <ul> viene compresso.

4. Premi di nuovo il tasto Freccia sinistra. L'elemento padre del nodo <ul> è selezionato. In questo caso si tratta del nodo <li> contenente le istruzioni per il passaggio 1.

5. Premi tre volte il tasto Freccia Giù in modo da aver riselezionato l'elenco <ul> appena compresso. Dovrebbe avere il seguente aspetto: <ul>...</ul>

6. Premi il tasto Freccia Destra. L'elenco si espande.

Scorri fino alla visualizzazione

Quando visualizzi l'albero DOM, a volte potresti trovarti interessato a un nodo DOM che al momento non è nell'area visibile. Ad esempio, supponi di aver fatto scorrere la pagina fino in fondo e di averti interesse per il nodo <h1> nella parte superiore della pagina. Scorri fino a visualizzare consente di riposizionare rapidamente l'area visibile in modo da poter vedere il nodo.

1. Fai clic con il tasto destro del mouse su Magritte qui sotto e seleziona Ispeziona.

   • Magritte
   • Soutine

2. Vai alla sezione Appendice: scorri fino alla visualizzazione in fondo a questa pagina. Le istruzioni continuano da lì.

Dopo aver completato le istruzioni in fondo alla pagina, torna a questa pagina.

Mostra righelli

Con i righelli a sinistra e sopra l'area visibile, puoi misurare la larghezza e l'altezza di un elemento quando passi il mouse sopra nel riquadro Elementi.

Attiva i righelli in uno dei due modi seguenti:

• Premi Ctrl+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu Comando, digita Show rulers on hover e premi Invio.
• Seleziona Impostazioni > Preferenze > Elementi > Mostra righello al passaggio del mouse.

L'unità di dimensione dei righelli è in pixel.

Cerca nodi

Puoi cercare nell'albero DOM per stringa, selettore CSS o selettore XPath.

1. Imposta lo stato attivo con il cursore sul riquadro Elementi.
2. Premi Ctrl+F o Comando+F (Mac). La barra di ricerca si apre nella parte inferiore dell'albero DOM.

3. Digita The Moon is a Harsh Mistress. L'ultima frase è evidenziata nell'albero DOM.

   

Come accennato in precedenza, la barra di ricerca supporta anche i selettori CSS e XPath.

Il riquadro Elementi seleziona il primo risultato corrispondente nell'albero DOM e lo mostra nell'area visibile. Per impostazione predefinita, questo avviene mentre digiti. Se lavori sempre con query di ricerca lunghe, puoi fare in modo che DevTools esegua la ricerca solo quando premi Invio.

Per evitare salti inutili da un nodo all'altro, deseleziona la casella di controllo Impostazioni > Preferenze > Globale > Ricerca durante la digitazione.

Modifica il DOM

Puoi modificare il DOM in tempo reale e vedere l'effetto di queste modifiche sulla pagina.

Modifica contenuti

Per modificare i contenuti di un nodo, fai doppio clic sui contenuti nell'albero DOM.

1. Fai clic con il tasto destro del mouse su Michelle qui sotto e seleziona Ispeziona.

   • Frittura
   • Michela

2. Nell'albero DOM, fai doppio clic su Michelle. In altre parole, fai doppio clic sul testo tra <li> e </li>. Il testo viene evidenziato in blu per indicare che è selezionato.

   

3. Elimina Michelle, digita Leela, quindi premi Invio per confermare la modifica. Il testo sopra cambia da Michelle a Leela.

Modifica attributi

Per modificare gli attributi, fai doppio clic sul nome o sul valore dell'attributo. Segui le istruzioni riportate di seguito per scoprire come aggiungere attributi a un nodo.

1. Fai clic con il tasto destro del mouse su Howard qui sotto e seleziona Ispeziona.

   • Howard
   • Vince

2. Fai doppio clic su <li>. Il testo viene evidenziato per indicare che il nodo è selezionato.

   

3. Premi il tasto Freccia destra, aggiungi uno spazio, digita style="background-color:gold" e premi Invio. Il colore di sfondo del nodo diventa oro.

   

Puoi anche utilizzare l'opzione di clic con il tasto destro del mouse Modifica attributo.

Modifica tipo di nodo

Per modificare il tipo di nodo, fai doppio clic sul tipo e digita il nuovo tipo.

1. Fai clic con il tasto destro del mouse su Hank qui sotto e seleziona Ispeziona.

   • Preside
   • Antonio
   • Tadeo
   • Brock

2. Fai doppio clic su <li>. Il testo li è evidenziato.

3. Elimina li, digita button e premi Invio. Il nodo <li> diventa un nodo <button>.

   

Modifica come HTML

Per modificare i nodi in formato HTML con l'evidenziazione della sintassi e il completamento automatico, seleziona Modifica come HTML dal menu a discesa del nodo.

1. Fai clic con il tasto destro del mouse su Leonard qui sotto e seleziona Ispeziona.

   • Penny
   • Howard
   • Federico
   • Leonard

2. Nel riquadro Elementi, fai clic con il tasto destro del mouse sul nodo corrente e seleziona Modifica come HTML dal menu a discesa.

   

3. Premi Invio per iniziare una nuova riga e iniziare a digitare <l. DevTool mette in evidenza la sintassi HTML e completa automaticamente i tag.

   

4. Seleziona l'elemento li dal menu di completamento automatico e digita >. DevTools aggiunge automaticamente il tag di chiusura </li> dopo il cursore.

   

5. Digita Sheldon all'interno del tag e premi Ctrl / Comando + Invio per applicare le modifiche.

   

Duplica un nodo

Puoi duplicare un elemento utilizzando l'opzione di clic con il tasto destro del mouse Duplica elemento.

1. Fai clic con il tasto destro del mouse su Nana qui sotto e seleziona Ispeziona.

   • Falò delle tovaglie
   • Nana
   • Orlando
   • Rumore bianco

2. Nel riquadro Elementi, fai clic con il pulsante destro del mouse su <li>Nana</li> e seleziona Duplica elemento dal menu a discesa.

   

3. Torna alla pagina. L'elemento dell'elenco è stato duplicato immediatamente.

Puoi anche utilizzare le scorciatoie da tastiera: Maiusc + Alt + Freccia giù (Windows e Linux) e Maiusc + Opzione + Freccia giù (MacOS).

Acquisisci uno screenshot del nodo

Puoi acquisire uno screenshot di qualsiasi singolo nodo nell'albero DOM utilizzando l'opzione Acquisisci screenshot del nodo.

1. Fai clic con il tasto destro del mouse su un'immagine in questa pagina e seleziona Ispeziona.

2. Nel riquadro Elementi, fai clic con il tasto destro del mouse sull'URL dell'immagine e seleziona Acquisisci screenshot del nodo dal menu a discesa.

   

3. Lo screenshot verrà salvato nei download.

   

Riordinare i nodi DOM

Trascina i nodi per riordinarli.

1. Fai clic con il tasto destro del mouse su Elvis Presley qui sotto e seleziona Ispeziona. Nota che si tratta dell'ultimo elemento dell'elenco.

   • Stevie Wonder
   • Tommaso Aspetta
   • [Nome di persona]
   • Elvis Presley

2. Nell'albero DOM, trascina <li>Elvis Presley</li> in cima all'elenco.

   

Forza stato

Puoi forzare la permanenza dei nodi in stati come :active, :hover, :focus, :visited e :focus-within.

1. Passa il mouse sopra Il Signore delle mosche qui sotto. Il colore di sfondo diventa arancione.

   • Il Signore delle mosche
   • Reati e punizioni
   • Moby Dick

2. Fai clic con il tasto destro del mouse su Il Signore delle mosche in alto e seleziona Ispeziona.

3. Fai clic con il pulsante destro del mouse su <li class="demo--hover">The Lord of the Flies</li> e seleziona Forza stato > :hover. Se non visualizzi questa opzione, consulta la sezione Appendice: Opzioni mancanti. Il colore di sfondo rimane arancione anche se non stai effettivamente passando il mouse sopra il nodo.

Nascondi un nodo

Premi H per nascondere un nodo.

1. Fai clic con il pulsante destro del mouse su The Stars My destination (Aggiungi la destinazione a Speciali) qui sotto e seleziona Ispeziona.

   • Il conte di Montecristo
   • La mia destinazione

2. Premi il tasto H. Il nodo è nascosto. Puoi anche fare clic con il tasto destro del mouse sul nodo e utilizzare l'opzione Nascondi elemento.

   

3. Premi di nuovo il tasto H. Il nodo viene mostrato di nuovo.

Elimina un nodo

Premi Canc per eliminare un nodo.

1. Fai clic con il tasto destro del mouse su Base in basso e seleziona Ispeziona.

   • L'uomo dell'illustrazione
   • Attraverso lo specchio
   • Modelli

2. Premi il tasto Canc. Il nodo è stato eliminato. Puoi anche fare clic con il tasto destro del mouse sul nodo e utilizzare l'opzione Elimina elemento.

3. Premi Ctrl+Z o Comando+Z (Mac). L'ultima azione viene annullata e il nodo riappare.

Accedere ai nodi nella console

DevTools fornisce alcune scorciatoie per accedere ai nodi DOM dalla console o per ottenere riferimenti a JavaScript.

Fai riferimento al nodo attualmente selezionato con $0

Quando ispezioni un nodo, il testo == $0 accanto al nodo indica che puoi fare riferimento a questo nodo nella console con la variabile $0.

1. Fai clic con il tasto destro del mouse su The Left Hand of Darkness qui sotto e seleziona Ispeziona.

   • La mano sinistra dell'oscurità
   • Dune

2. Premi il tasto Esc per aprire il riquadro a scomparsa della console.

3. Digita $0 e premi il tasto Invio. Il risultato dell'espressione mostra che $0 restituisce <li>The Left Hand of Darkness</li>.

   

4. Passa il mouse sopra il risultato. Il nodo è evidenziato nell'area visibile.

5. Fai clic su <li>Dune</li> nell'albero DOM, digita nuovamente $0 nella console e premi di nuovo Invio. Ora, il valore di $0 è <li>Dune</li>.

   

Memorizza come variabile globale

Se devi fare riferimento a un nodo più volte, memorizzalo come variabile globale.

1. Fai clic con il pulsante destro del mouse su The Big Sleep qui sotto e seleziona Ispeziona.

   • Il grande sonno
   • Il lungo addio

2. Fai clic con il pulsante destro del mouse su <li>The Big Sleep</li> nell'albero DOM e seleziona Archivia come variabile globale. Se non visualizzi questa opzione, consulta la sezione Appendice: Opzioni mancanti.

3. Digita temp1 nella console e premi Invio. Il risultato dell'espressione mostra che la variabile restituisce al nodo.

   

Copia percorso JS

Copia il percorso JavaScript su un nodo quando devi farvi riferimento in un test automatico.

1. Fai clic con il tasto destro del mouse su The Brothers Karamazov qui sotto e seleziona Ispeziona.

   • I fratelli Karamazov
   • Reati e punizioni

2. Fai clic con il pulsante destro del mouse su <li>The Brothers Karamazov</li> nell'albero DOM e seleziona Copia > Copia percorso JS. Un'espressione document.querySelector() che si risolve nel nodo è stata copiata negli appunti.

3. Premi Ctrl + V o Comando + V (Mac) per incollare l'espressione nella console.

4. Premi Invio per valutare l'espressione.

   

Interrompi in caso di modifiche al DOM

DevTools consente di mettere in pausa il codice JavaScript di una pagina quando JavaScript modifica il DOM. Consulta l'articolo sui punti di interruzione delle modifiche al DOM.

Passaggi successivi

Ciò copre la maggior parte delle funzionalità relative al DOM in DevTools. Per scoprire le altre, fai clic con il tasto destro del mouse sui nodi nell'albero DOM e sperimenta con le altre opzioni non trattate in questo tutorial. Vedi anche Scorciatoie da tastiera nel riquadro Elementi.

Consulta la home page di Chrome DevTools per scoprire tutto ciò che puoi fare con DevTools.

Consulta Community se vuoi contattare il team DevTools o ricevere assistenza dalla community DevTools.

Appendice: HTML e DOM a confronto

Questa sezione spiega rapidamente la differenza tra HTML e DOM.

Quando utilizzi un browser web per richiedere una pagina come https://example.com, il server restituisce codice HTML in questo modo:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

Il browser analizza l'HTML e crea una struttura di oggetti come il seguente:

html
  head
    title
  body
    h1
    p
    script

Questa struttura di oggetti, o nodi, che rappresenta i contenuti della pagina è denominata DOM. Al momento l'aspetto è identico a quello dell'HTML, ma supponiamo che lo script a cui si fa riferimento nella parte inferiore del codice HTML esegua questo codice:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Questo codice rimuove il nodo h1 e aggiunge un altro nodo p al DOM. Il DOM completo ora ha il seguente aspetto:

html
  head
    title
  body
    p
    script
    p

Il codice HTML della pagina è ora diverso dal DOM della pagina. In altre parole, HTML rappresenta il contenuto iniziale della pagina, mentre il DOM rappresenta il contenuto della pagina corrente. Quando JavaScript aggiunge, rimuove o modifica nodi, il DOM diventa diverso dall'HTML.

Per saperne di più, consulta Introduzione al DOM.

Appendice: scorrimento per visualizzazione

Questa è una continuazione della sezione Scorri fino a visualizzare. Segui le istruzioni riportate di seguito per completare la sezione.

1. Il nodo <li>Magritte</li> dovrebbe essere ancora selezionato nell'albero DOM. In caso contrario, torna a Scorri fino alla visualizzazione e ricomincia.

2. Fai clic con il tasto destro del mouse sul nodo <li>Magritte</li> e seleziona Scorri nella visualizzazione. L'area visibile scorre verso l'alto in modo da poter vedere il nodo Magritte. Consulta la sezione Appendice: Opzioni mancanti se non riesci a vedere l'opzione Scorri fino a visualizzare.

   

Appendice: Opzioni mancanti

Molte delle istruzioni di questo tutorial indicano di fare clic con il tasto destro del mouse su un nodo nella struttura DOM e di selezionare un'opzione dal menu contestuale che viene visualizzato. Se non vedi l'opzione specificata nel menu contestuale, prova a fare clic con il tasto destro del mouse lontano dal testo del nodo.