Introdução à visualização e alteração do DOM

Kayce Basques

Sofia Emelianova

Assista ao vídeo e conclua estes tutoriais interativos para aprender os conceitos básicos de como visualizar e mudar o DOM de uma página usando o Chrome DevTools.

Neste tutorial, consideramos que você sabe a diferença entre o DOM e o HTML. Consulte o Apêndice: HTML versus o DOM para uma explicação.

Conferir nós do DOM

A árvore DOM do painel Elements é onde você realiza todas as atividades relacionadas ao DOM nas Ferramentas do desenvolvedor.

Inspecionar um nó

Quando você tem interesse em um nó DOM específico, Inspecionar é uma maneira rápida de abrir as Ferramentas do desenvolvedor e investigar esse nó.

1. Clique com o botão direito do mouse em Michelangelo abaixo e selecione Inspecionar.
   • Michelangelo
   • Raphael O painel Elements do DevTools é aberto. <li>Michelangelo</li> é destacado na árvore do DOM.
2. Clique no ícone Inspect no canto superior esquerdo do DevTools.

3. Clique no texto Tokyo abaixo.

   • Tóquio

   • Beirute

     Agora, <li>Tokyo</li> está destacado na árvore do DOM.

Inspecionar um nó também é a primeira etapa para visualizar e mudar os estilos de um nó. Consulte Começar a visualizar e alterar o CSS.

Navegar pela árvore do DOM com um teclado

Depois de selecionar um nó na árvore do DOM, você pode navegar pela árvore do DOM com o teclado.

1. Clique com o botão direito do mouse em Ringo abaixo e selecione Inspecionar. <li>Ringo</li> está selecionado na árvore do DOM.

   • George
   • Ringo
   • Paul

   • João

     

2. Pressione a tecla de seta para cima duas vezes. O projeto <ul> está selecionado.

   

3. Pressione a tecla de seta esquerda. A lista <ul> é recolhida.

4. Pressione a tecla de seta para a esquerda novamente. O pai do nó <ul> está selecionado. Neste caso, é o nó <li> que contém as instruções para a etapa 1.

5. Pressione a tecla de seta para baixo três vezes para selecionar novamente a lista <ul> que você acabou de ocultar. Ele vai ficar assim: <ul>...</ul>

6. Pressione a tecla de seta para a direita. A lista é expandida.

Rolar para a visualização

Ao visualizar a árvore DOM, às vezes você se interessa por um nó do DOM que não está na janela de visualização. Por exemplo, suponha que você tenha rolado até a parte de baixo da página e esteja interessado no nó <h1> na parte de cima da página. Rolar para visualização permite reposicionar rapidamente a janela de visualização para que você possa ver o nó.

1. Clique com o botão direito do mouse em Magritte abaixo e selecione Inspecionar.

   • Magritte
   • Soutine

2. Acesse a seção Apêndice: rolagem para visualização na parte de baixo desta página. As instruções continuam lá.

Depois de concluir as instruções na parte de baixo da página, volte para esta página.

Exibir regras

Com as réguas acima e à esquerda da janela de visualização, você pode medir a largura e a altura de um elemento ao passar o cursor sobre ele no painel Elementos.

Ative as réguas de duas maneiras:

• Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando, digite Show rulers on hover e pressione Enter.
• Verifique as configurações Configurações > Preferências > Elementos > Mostrar réguas ao passar o cursor.

A unidade de dimensionamento das réguas é o pixel.

Pesquisar nós

É possível pesquisar a árvore DOM por string, seletor de CSS ou seletor XPath.

1. Coloque o cursor no painel Elementos.
2. Pressione Control+F ou Command+F (Mac). A barra de pesquisa é aberta na parte de baixo da árvore DOM.

3. Digite The Moon is a Harsh Mistress. A última frase é destacada na árvore DOM.

   

Como mencionado acima, a barra de pesquisa também oferece suporte a seletores CSS e XPath.

O painel Elements seleciona o primeiro resultado correspondente na árvore do DOM e o exibe na janela de visualização. Por padrão, isso acontece enquanto você digita. Se você sempre trabalha com consultas de pesquisa longas, é possível fazer com que o DevTools execute a pesquisa somente quando você pressionar Enter.

Para evitar saltos desnecessários entre nós, limpe a caixa de seleção Configurações Configurações > Preferências > Global > Pesquisar conforme digito.

Editar o DOM

Você pode editar o DOM dinamicamente e conferir como essas mudanças afetam a página.

Editar conteúdo

Para editar o conteúdo de um nó, clique duas vezes nele na árvore do DOM.

1. Clique com o botão direito do mouse em Michelle abaixo e selecione Inspecionar.

   • Frito
   • Michelle

2. Na árvore do DOM, clique duas vezes em Michelle. Em outras palavras, clique duas vezes no texto entre <li> e </li>. O texto é destacado em azul para indicar que está selecionado.

   

3. Exclua Michelle, digite Leela e pressione Enter para confirmar a mudança. O texto acima muda de Michelle para Leela.

Editar atributos

Para editar atributos, clique duas vezes no nome ou valor do atributo. Siga as instruções abaixo para saber como adicionar atributos a um nó.

1. Clique com o botão direito do mouse em Howard abaixo e selecione Inspecionar.

   • Howard
   • Vince

2. Clique duas vezes em <li>. O texto é destacado para indicar que o nó está selecionado.

   

3. Pressione a tecla de seta direita, adicione um espaço, digite style="background-color:gold" e pressione Enter. A cor de fundo do nó muda para dourado.

   

Também é possível usar a opção Edit attribute (Editar atributo) ao clicar com o botão direito do mouse.

Editar tipo de nó

Para editar o tipo de um nó, clique duas vezes nele e digite o novo tipo.

1. Clique com o botão direito do mouse em Hank abaixo e selecione Inspecionar.

   • Dean
   • Kibon
   • Tadeu
   • Brock

2. Clique duas vezes em <li>. O texto li está em destaque.

3. Exclua li, digite button e pressione Enter. O nó <li> muda para um nó <button>.

   

Editar como HTML

Para editar nós como HTML com destaque de sintaxe e preenchimento automático, selecione Editar como HTML no menu suspenso do nó.

1. Clique com o botão direito do mouse em Leonard abaixo e selecione Inspecionar.

   • Centavo
   • Howard
   • Rajesh
   • Leonard

2. No painel Elements, clique com o botão direito do mouse no nó atual e selecione Editar como HTML no menu suspenso.

   

3. Pressione Enter para iniciar uma nova linha e começar a digitar <l. O DevTools destaca a sintaxe HTML e preenche as tags automaticamente.

   

4. Selecione o elemento li no menu de preenchimento automático e digite >. As ferramentas do desenvolvedor adicionam automaticamente a tag </li> de fechamento após o cursor.

   

5. Digite Sheldon dentro da tag e pressione Control / Command + Enter para aplicar as mudanças.

   

Duplicar um nó

É possível duplicar um elemento usando a opção Duplicar elemento.

1. Clique com o botão direito do mouse em Nana abaixo e selecione Inspecionar.

   • Fogueira das vaidades
   • Nana
   • Orlando
   • Ruído branco

2. No painel Elements, clique com o botão direito do mouse em <li>Nana</li> e selecione Duplicate element no menu suspenso.

   

3. Volte para a página. O item da lista foi duplicado instantaneamente.

Você também pode usar os atalhos do teclado: Shift + Alt + seta para baixo (Windows e Linux) e Shift + Option + seta para baixo (MacOS).

Fazer captura de tela de um nó

É possível fazer capturas de tela de qualquer nó individual na árvore DOM usando Captura de tela do nó.

1. Clique com o botão direito do mouse em qualquer imagem desta página e selecione Inspecionar.

2. No painel Elements, clique com o botão direito do mouse no URL da imagem e selecione Capturar captura de tela do nó no menu suspenso.

   

3. A captura de tela será salva nos seus downloads.

   

Para saber mais sobre como fazer capturas de tela com o DevTools, consulte Quatro maneiras de fazer capturas de tela com o DevTools.

Reordenar nós do DOM

Arraste os nós para reordená-los.

1. Clique com o botão direito do mouse em Elvis Presley abaixo e selecione Inspecionar. Ele é o último item da lista.

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

2. Na árvore DOM, arraste <li>Elvis Presley</li> para a parte de cima da lista.

   

Forçar estado

É possível forçar os nós a permanecer em estados como :active, :hover, :focus, :visited e :focus-within.

1. Passe o cursor sobre O Senhor das Moscas abaixo. A cor do plano de fundo fica laranja.

   • O Senhor das Moscas
   • Crime e castigo
   • Moby Dick

2. Clique com o botão direito do mouse em O Senhor das Moscas acima e selecione Inspecionar.

3. Clique com o botão direito do mouse em <li class="demo--hover">The Lord of the Flies</li> e selecione Forçar estado > :hover. Consulte o Apêndice: opções ausentes se a opção não estiver disponível. A cor de plano de fundo permanece laranja, mesmo que você não esteja passando o cursor sobre o nó.

Ocultar um nó

Pressione H para ocultar um nó.

1. Clique com o botão direito do mouse em The Stars My Destination abaixo e selecione Inspecionar.

   • O Conde de Monte Cristo
   • The Stars My Destination

2. Pressione a tecla H. O nó está oculto. Você também pode clicar com o botão direito do mouse no nó e usar a opção Ocultar elemento.

   

3. Pressione a tecla H novamente. O nó é mostrado novamente.

Excluir um nó

Pressione Excluir para excluir um nó.

1. Clique com o botão direito do mouse em Foundation abaixo e selecione Inspecionar.

   • The Illustrated Man
   • Through the Looking-Glass
   • Base

2. Pressione a tecla Delete. O nó é excluído. Também é possível clicar com o botão direito do mouse no nó e usar a opção Excluir elemento.

3. Pressione Control+Z ou Command+Z (Mac). A última ação é desfeita, e o nó reaparece.

Acessar nós no console

As DevTools oferecem alguns atalhos para acessar nós do DOM no console ou para receber referências JavaScript a eles.

Fazer referência ao nó selecionado com $0

Quando você inspeciona um nó, o texto == $0 ao lado dele significa que você pode fazer referência a esse nó no console com a variável $0.

1. Clique com o botão direito do mouse em The Left Hand of Darkness abaixo e selecione Inspecionar.

   • A Mão Esquerda da Escuridão
   • Duna

2. Pressione a tecla Escape para abrir a gaveta do console.

3. Digite $0 e pressione a tecla Enter. O resultado da expressão mostra que $0 é avaliado como <li>The Left Hand of Darkness</li>.

   

4. Passe o cursor sobre o resultado. O nó é destacado na janela de visualização.

5. Clique em <li>Dune</li> na árvore DOM, digite $0 no console novamente e pressione Enter novamente. Agora, $0 é avaliado como <li>Dune</li>.

   

Armazenar como variável global

Se você precisar se referir a um nó várias vezes, armazene-o como uma variável global.

1. Clique com o botão direito do mouse em The Big Sleep abaixo e selecione Inspecionar.

   • O Grande Sono
   • The Long Goodbye

2. Clique com o botão direito do mouse em <li>The Big Sleep</li> na árvore DOM e selecione Store as global variable. Consulte o Apêndice: opções ausentes se a opção não estiver disponível.

3. Digite temp1 no console e pressione Enter. O resultado da expressão mostra que a variável é avaliada como o nó.

   

Copiar caminho JS

Copie o caminho do JavaScript para um nó quando precisar fazer referência a ele em um teste automatizado.

1. Clique com o botão direito do mouse em Os irmãos Karamazov abaixo e selecione Inspecionar.

   • Os Irmãos Karamazov
   • Crime e castigo

2. Clique com o botão direito do mouse em <li>The Brothers Karamazov</li> na árvore DOM e selecione Copiar > Copiar caminho JS. Uma expressão document.querySelector() que é resolvida para o nó foi copiada para a área de transferência.

3. Pressione Control+V ou Command+V (Mac) para colar a expressão no console.

4. Pressione Enter para avaliar a expressão.

   

Interromper em mudanças do DOM

O DevTools permite pausar o JavaScript de uma página quando ele modifica o DOM. Consulte Pontos de interrupção de mudança do DOM.

Próximas etapas

Isso abrange a maioria dos recursos relacionados ao DOM no DevTools. Você pode descobrir o restante clicando com o botão direito do mouse nos nós na árvore DOM e experimentando as outras opções que não foram abordadas neste tutorial. Consulte também Atalhos de teclado do painel de elementos.

Confira a página inicial do Chrome DevTools para descobrir tudo o que você pode fazer com o DevTools.

Consulte a Comunidade se quiser entrar em contato com a equipe do DevTools ou receber ajuda da comunidade.

Apêndice: HTML versus DOM

Esta seção explica rapidamente a diferença entre HTML e DOM.

Quando você usa um navegador da Web para solicitar uma página como https://example.com, o servidor retorna um HTML assim:

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

O navegador analisa o HTML e cria uma árvore de objetos assim:

html
  head
    title
  body
    h1
    p
    script

Essa árvore de objetos ou nós que representa o conteúdo da página é chamada de DOM. No momento, ele tem a mesma aparência do HTML, mas suponha que o script referenciado na parte de baixo do HTML execute este código:

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

Esse código remove o nó h1 e adiciona outro nó p ao DOM. O DOM completo agora tem esta aparência:

html
  head
    title
  body
    p
    script
    p

O HTML da página agora é diferente do DOM. Em outras palavras, o HTML representa o conteúdo inicial da página, e o DOM representa o conteúdo atual da página. Quando o JavaScript adiciona, remove ou edita nós, o DOM se torna diferente do HTML.

Consulte Introdução ao DOM para saber mais.

Apêndice: rolar para a visualização

Esta é uma continuação da seção Rolar para visualização. Siga as instruções abaixo para concluir a seção.

1. O nó <li>Magritte</li> ainda precisa estar selecionado na árvore DOM. Caso contrário, volte para Role para visualizar e comece de novo.

2. Clique com o botão direito do mouse no nó <li>Magritte</li> e selecione Scroll into view. A janela de visualização rola de volta para que você possa ver o nó Magritte. Consulte o Apêndice: opções ausentes se a opção Rolar para mostrar não aparecer.

   

Apêndice: opções ausentes

Muitas das instruções neste tutorial instruem você a clicar com o botão direito do mouse em um nó na árvore DOM e selecionar uma opção no menu de contexto que aparece. Se a opção especificada não aparecer no menu de contexto, clique com o botão direito do mouse fora do texto do nó.