Inizia a visualizzare e modificare il DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Guarda il video e completa questi tutorial interattivi per apprendere le nozioni di base su come visualizzare e modificare il DOM di una pagina utilizzando Chrome DevTools.

Questo tutorial presuppone che tu conosca la differenza tra DOM e HTML. Per una spiegazione, consulta Appendice: HTML e DOM.

Visualizza i nodi DOM

La struttura DOM del riquadro Elementi è il luogo in cui svolgi tutte le attività relative al DOM in DevTools.

Ispeziona un nodo

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

  1. Fai clic con il tasto destro del mouse su Michelangelo di seguito e seleziona Ispeziona.
    • Michelangelo
    • Raphael Ispezione di un nodo Si apre il riquadro Elementi di DevTools. <li>Michelangelo</li> è evidenziato nell'albero DOM. Evidenziazione del nodo Michelangelo<
  2. Fai clic sull'icona Controlla nell'angolo in alto a sinistra di DevTools.L&#39;icona Ispeziona

  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 CSS.

Esplorare l'albero DOM con una tastiera

Dopo aver selezionato un nodo nella struttura ad albero DOM, puoi navigare nella struttura con la tastiera.

  1. Fai clic con il tasto destro del mouse su Ringo di seguito e seleziona Ispeziona. <li>Ringo</li> è selezionato nell'albero DOM.

    • George
    • Ringo
    • Paul

    • John

      Ispezione del nodo Ringo

  2. Premi il tasto Freccia Su due volte. <ul> è selezionato.

    Ispezione del nodo ul

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

  4. Premi di nuovo il tasto Freccia Sinistra. Il nodo principale <ul> è selezionato. In questo caso, si tratta del nodo <li> contenente le istruzioni per il passaggio 1.

  5. Premi il tasto Freccia giù tre volte per selezionare di nuovo l'elenco <ul> che hai appena compresso. Dovrebbe avere il seguente aspetto: <ul>...</ul>

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

Scorri finché l'elemento diventa visibile

Quando visualizzi l'albero DOM, a volte potresti essere interessato a un nodo DOM che al momento non è nel viewport. Ad esempio, supponiamo che tu abbia scorruto fino in fondo alla pagina e che ti interessi il nodo <h1> nella parte superiore della pagina. L'opzione Fai scorrere in vista consente di riposizionare rapidamente l'area visibile in modo da vedere il nodo.

  1. Fai clic con il tasto destro del mouse su Magritte di seguito e seleziona Ispeziona.

    • Magritte
    • Soutine

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

Dopo aver completato le istruzioni nella parte inferiore della pagina, torna qui.

Mostra righelli

Con i righi sopra e a sinistra del viewport, puoi misurare la larghezza e l'altezza di un elemento quando passi il mouse sopra il riquadro Elementi.

Righelli.

Attiva le righe in uno dei due modi seguenti:

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

L'unità di misura delle righe è in pixel.

Puoi eseguire ricerche nella struttura DOM per stringa, selettore CSS o selettore XPath.

  1. Posiziona 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.

    Evidenziazione della query nella barra di ricerca

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

Il riquadro Elementi seleziona il primo risultato corrispondente nella struttura DOM e lo mostra nel viewport. Per impostazione predefinita, questo avviene durante la digitazione. Se utilizzi sempre query di ricerca lunghe, puoi fare in modo che DevTools esegua la ricerca solo quando premi Invio.

Per evitare salti non necessari tra i nodi, deseleziona la casella di controllo Impostazioni > Preferenze > Globali > Cerca mentre digiti.

Deseleziona la casella di controllo Ricerca durante la digitazione nelle Impostazioni.

Modificare il DOM

Puoi modificare il DOM in tempo reale e vedere in che modo queste modifiche influiscono sulla pagina.

Modifica contenuti

Per modificare i contenuti di un nodo, fai doppio clic sui contenuti nella struttura DOM.

  1. Fai clic con il tasto destro del mouse su Michelle di seguito e seleziona Ispeziona.

    • Friggere
    • Michelle

  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.

    Modificare il testo

  3. Elimina Michelle, digita Leela e 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 di seguito e seleziona Ispeziona.

    • Howard
    • Vince

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

    Modifica del nodo

  3. Premi il tasto Freccia Destra, aggiungi uno spazio, digitastyle="background-color:gold" e premi Invio. Il colore dello sfondo del nodo diventa oro.

    Aggiungendo un attributo style al nodo

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

Fai clic con il tasto destro del mouse sulle opzioni con l&#39;attributo di modifica evidenziato.

Modifica tipo di nodo

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

  1. Fai clic con il tasto destro del mouse su Hank di seguito e seleziona Ispeziona.

    • Dean
    • Antonio
    • Taddeo
    • 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 del tipo di nodo in pulsante

Modifica come HTML

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

  1. Fai clic con il tasto destro del mouse su Leonard di seguito e seleziona Ispeziona.

    • Penny
    • Howard
    • Rajesh
    • 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.

    Il menu a discesa di un nodo.

  3. Premi Invio per iniziare una nuova riga e inizia a digitare <l. DevTools evidenzia la sintassi HTML e completa automaticamente i tag.

    Completamento automatico dei tag HTML.

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

    DevTools chiude automaticamente il tag.

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

    Applicazione delle modifiche.

Duplicare un nodo

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

  1. Fai clic con il tasto destro del mouse su Nana di seguito e seleziona Ispeziona.

    • Falò delle vanità
    • Nana
    • Orlando
    • Rumore bianco

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

    L&#39;opzione Duplica elemento evidenziata nel menu a discesa.

  3. Torna alla pagina. La voce dell'elenco è stata duplicata 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 lo screenshot di qualsiasi singolo nodo dell'albero DOM utilizzando 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 immagine e seleziona Acquisisci screenshot del nodo dal menu a discesa.

    Uno screenshot del nodo in fase di acquisizione.

  3. Lo screenshot verrà salvato nei download.

    Screenshot del nodo salvato in Download.

Per scoprire altri modi per acquisire screenshot con DevTools, consulta 4 modi per acquisire screenshot con DevTools.

Riordinare i nodi DOM

Trascina i nodi per riordinarli.

  1. Fai clic con il tasto destro del mouse su Elvis Presley di seguito e seleziona Ispeziona. Tieni presente che è l'ultimo elemento nell'elenco.

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

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

    Trascinando il nodo nella parte superiore dell&#39;elenco

Forza stato

Puoi forzare i nodi a rimanere in stati come :active, :hover, :focus, :visited e :focus-within.

  1. Passa il mouse sopra Il signore delle mosche di seguito. Il colore di sfondo diventa arancione.

    • Il signore delle mosche
    • Delitto e castigo
    • Moby Dick

  2. Fai clic con il tasto destro del mouse su Il signore delle mosche qui sopra e seleziona Ispeziona.

  3. Fai clic con il tasto destro del mouse su <li class="demo--hover">The Lord of the Flies</li> e seleziona Forza stato > :hover. Se non vedi questa opzione, consulta l'Appendice: opzioni mancanti. Il colore di sfondo rimane arancione anche se non passi il mouse sopra il nodo.

Nascondere un nodo

Premi H per nascondere un nodo.

  1. Fai clic con il tasto destro del mouse su The Stars My Destination di seguito e seleziona Ispeziona.

    • Il conte di Montecristo
    • The Stars My Destination

  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.

    Aspetto del nodo nell&#39;albero DOM dopo averlo nascosto

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

Elimina un nodo

Premi Elimina per eliminare un nodo.

  1. Fai clic con il tasto destro del mouse su Foundation di seguito e seleziona Ispeziona.

    • L'uomo illustrato
    • Attraverso lo specchio
    • Fondazione

  2. Premi il tasto Canc.. Il nodo viene 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 viene visualizzato di nuovo.

Accedere ai nodi nella console

DevTools fornisce alcune scorciatoie per accedere ai nodi DOM dalla console o per recuperarne i riferimenti JavaScript.

Fai riferimento al nodo attualmente selezionato con 0 $

Quando esamini 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 La mano sinistra del buio di seguito e seleziona Ispeziona.

    • La mano sinistra del buio
    • Duna

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

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

    Il risultato della prima espressione $0 nella console

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

  5. Fai clic su <li>Dune</li> nella struttura DOM, digita di nuovo $0 nella console e premi di nuovo Invio. Ora $0 restituisce <li>Dune</li>.

    Il risultato della seconda espressione $0 nella console

Memorizza come variabile globale

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

  1. Fai clic con il tasto destro del mouse su Il grande sonno di seguito e seleziona Ispeziona.

    • Il grande sonno
    • The Long Goodbye

  2. Fai clic con il tasto destro del mouse su <li>The Big Sleep</li> nell'albero DOM e seleziona Memorizza come variabile globale. Se non vedi questa opzione, consulta l'Appendice: opzioni mancanti.

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

    Il risultato dell&#39;espressione temp1

Copia percorso JS

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

  1. Fai clic con il tasto destro del mouse su I fratelli Karamazov di seguito e seleziona Ispeziona.

    • I fratelli Karamazov
    • Delitto e castigo

  2. Fai clic con il tasto destro del mouse su <li>The Brothers Karamazov</li> nell'albero DOM e seleziona Copia > Copia percorso JS. Un'espressione document.querySelector() che risolve il node è 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.

    Il risultato dell&#39;espressione Copia percorso JS

Interrompi in caso di modifiche al DOM

DevTools ti consente di mettere in pausa il codice JavaScript di una pagina quando questo modifica il DOM. Consulta Punti di interruzione per le modifiche al DOM.

Passaggi successivi

Questa opzione copre la maggior parte delle funzionalità relative al DOM in DevTools. Puoi scoprire le altre facendo clic con il tasto destro del mouse sui nodi nell'albero DOM e sperimentando le altre opzioni non trattate in questo tutorial. Consulta anche le scorciatoie da tastiera del riquadro Elementi.

Visita la home page di Chrome DevTools per scoprire tutto il resto che puoi fare con DevTools.

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

Appendice: HTML e DOM

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 HTML come questo:

<!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 il codice HTML e crea un albero di oggetti come questo:

html
  head
    title
  body
    h1
    p
    script

Questa struttura ad albero di oggetti o nodi che rappresenta i contenuti della pagina è chiamata DOM. Al momento ha lo stesso aspetto dell'HTML, ma supponiamo che lo script a cui si fa riferimento nella parte inferiore dell'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. In altre parole, l'HTML rappresenta i contenuti iniziali della pagina e il DOM i contenuti attuali della pagina. Quando JavaScript aggiunge, rimuove o modifica i nodi, il DOM diventa diverso dall'HTML.

Per saperne di più, consulta Introduzione al DOM.

Appendice: scorri finché l'elemento diventa visibile

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

  1. Il nodo <li>Magritte</li> dovrebbe essere ancora selezionato nella struttura DOM. In caso contrario, torna a Scorrere fino a visualizzare e ricomincia da capo.

  2. Fai clic con il tasto destro del mouse sul nodo <li>Magritte</li> e seleziona Fai scorrere fino a visualizzare. La visualizzazione della pagina scorri di nuovo verso l'alto in modo da visualizzare il nodo Magritte. Consulta la Appendice: opzioni mancanti se non vedi l'opzione Scorri fino a visualizzare.

    Scorri finché l&#39;elemento diventa visibile

Appendice: opzioni mancanti

Molte delle istruzioni di questo tutorial ti chiedono di fare clic con il tasto destro del mouse su un nodo nell'albero DOM e poi di selezionare un'opzione dal menu contestuale 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.

Dove fare clic se non vengono visualizzate tutte le opzioni