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 sulla visualizzazione e Modificare il DOM di una pagina con 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 Ispezione di un nodo Si apre il riquadro Elements di DevTools. L'elemento <li>Michelangelo</li> è evidenziato nella struttura DOM. Museo di Michelangelo< nodo
  2. Fai clic sull'icona Ispeziona nell'angolo in alto a sinistra della DevTools. 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 codice CSS.

Navigare nell'albero DOM con una tastiera

Dopo aver selezionato un nodo nell'albero DOM, puoi esplorare l'albero DOM con tastiera.

  1. Fai clic con il tasto destro del mouse su Ringo qui sotto e seleziona Ispeziona. <li>Ringo</li> selezionato in l'albero DOM.

    • George
    • Ringo
    • Paul

    • John

      Ispezione del nodo Ringo

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

    Ispezione del nodo ul

  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> è selezionata. 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 il <ul> elenco 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 al momento non nell'area visibile. Ad esempio, supponi di aver fatto scorrere la pagina fino alla fine e ti interessa 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 Elements.

Righelli.

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.
  • Controlla Impostazioni. Impostazioni > Preferenze > Elements > Mostra righelli al passaggio del mouse.

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

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

  1. Imposta lo stato attivo con il cursore sul riquadro Elements.
  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 in precedenza, la barra di ricerca supporta anche i selettori CSS e XPath.

Il riquadro Elements 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 Impostazioni. Impostazioni > Preferenze > Globale > Casella di controllo Cerca durante la digitazione.

Cancellata la casella di controllo Ricerca durante la digitazione in Impostazioni.

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.

    Modifica del testo

  3. Elimina Michelle, digita Leela, quindi premi Invio per confermare la modifica. Il testo come indicato in precedenza da Michelle a Leela.

Modifica attributi

Per modificare gli attributi, fai doppio clic sul nome o sul valore dell'attributo. Segui le istruzioni 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 nodo è selezionato.

    Modifica del nodo

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

    Aggiunta di un attributo di stile al nodo

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

Opzioni di clic con il tasto destro del mouse con Modifica attributo evidenziato.

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
    • Thaddeus
    • Brock

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

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

    Modifica del tipo di nodo in pulsante

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
    • Rajesh
    • Leonard

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

    Il menu a discesa di un nodo.

  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.

    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 Ctrl / Comando + Invio per applicare le modifiche.

    Applicazione delle modifiche in corso.

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 Elements, fai clic con il pulsante destro del mouse su <li>Nana</li> e seleziona Elements dal menu a discesa.

    L&#39;opzione Duplica elemento evidenziata nel 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 Elements, fai clic con il tasto destro del mouse sull'URL dell'immagine e seleziona Elements dal menu a discesa.

    Uno screenshot del nodo che viene acquisito.

  3. Lo screenshot verrà salvato nei download.

    Screenshot del nodo salvato nei download.

Per scoprire altri modi per acquisire screenshot con DevTools, consulta l'articolo 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 qui sotto e seleziona Ispeziona. Nota che si tratta dell'ultimo elemento nell'elenco.

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

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

    Trascinando il nodo in cima all&#39;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 tasto 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 sul 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.

    Come appare il nodo nell&#39;albero DOM dopo essere stato nascosto

  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
    • Fondazione

  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 che vi fanno riferimento in JavaScript.

Fai riferimento al nodo attualmente selezionato con $0

Quando ispezioni un nodo, la presenza di testo == $0 accanto al nodo indica che puoi farvi riferimento 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à
    • Duna

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

    Il risultato della prima espressione $0 nella console

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

  5. Fai clic su <li>Dune</li> nella struttura DOM, digita nuovamente $0 nella console e premi Inserisci di nuovo. Ora, il valore di $0 è <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 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 Memorizza come globale la variabile personalizzata. 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 il nodo.

    Il risultato dell&#39;espressione temp1

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 il nodo è stato copiato negli appunti.

  3. Premi Ctrl+V o Comando+V (Mac) per incolla 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 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. Puoi scoprire il resto facendo clic con il tasto destro del mouse sui nodi nell'albero DOM e sperimentando con le altre opzioni che non erano trattati in questo tutorial. Vedi anche Scorciatoie da tastiera nel riquadro Elementi.

Visita la home page di Chrome DevTools per scoprire tutte le novità che puoi fare con DevTools.

Consulta Community per contattare il team DevTools o richiedi assistenza alla community DevTools.

Appendice: HTML e DOM a confronto

Questa sezione spiega rapidamente la differenza tra HTML e DOM.

Quando usi un browser web per richiedere una pagina, ad esempio https://example.com il server restituisce un codice HTML nel seguente 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 viene fatto riferimento in fondo al codice HTML esegue 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. Ora il DOM completo nel seguente modo:

html
  head
    title
  body
    p
    script
    p

Il codice HTML della pagina è ora diverso dal DOM della pagina. In altre parole, il codice HTML rappresenta il contenuto iniziale della pagina e 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. Scorrimenti dell'area visibile fai il backup in modo che tu possa vedere il nodo Magritte. Consulta la sezione Appendice: Opzioni mancanti se non riesci a vedere l'opzione Scorri fino a visualizzare.

    Scorri fino alla visualizzazione

Appendice: Opzioni mancanti

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

Dove fare clic se non vedi tutte le opzioni