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

Assista ao vídeo e conclua estes tutoriais interativos para aprender os conceitos básicos de visualização e alteração do DOM de uma página usando o Chrome DevTools.

Este tutorial presume que você sabe a diferença entre o DOM e o HTML. Consulte o Apêndice: HTML versus DOM para ver uma explicação.

Ver nós do DOM

A árvore DOM do painel de elementos é onde você realiza todas as atividades relacionadas ao DOM no DevTools.

Inspecionar um nó

Se você tiver interesse em um nó do DOM específico, Inspect é uma maneira rápida de abrir o DevTools e investigar esse nó.

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

3. Clique no texto Tóquio abaixo.

   • Tóquio

   • Beirute

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

A inspeção de um nó também é a primeira etapa para visualizar e alterar os estilos de um nó. Consulte Primeiros passos com a visualização e a alteração de CSS.

Navegar na árvore do DOM com um teclado

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

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

   • George
   • Ringo
   • Paul

   • João

     

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

   

3. Pressione a tecla de seta para a esquerda. A lista <ul> será fechada.

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 da etapa 1.

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

6. Pressione a tecla de seta para a direita. A lista se expande.

Rolar para a visualização

Ao visualizar a árvore do DOM, às vezes você terá interesse em um nó do DOM que não esteja na janela de visualização. Por exemplo, suponha que você rolou até a parte de baixo da página e tem interesse no nó <h1> na parte de cima. Rolar para visualização permite reposicionar rapidamente a janela de visualização para 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: rolar para a visualização na parte de baixo desta página. As instruções continuam lá.

Após concluir as instruções na parte inferior da página, volte para esta seção.

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 passando 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.
• Marque Configurações > Preferências > Elementos > Mostrar réguas ao passar o cursor.

A unidade de dimensionamento das réguas é em pixels.

Pesquisar nós

Você pode pesquisar a árvore do DOM por string, seletor de CSS ou seletor XPath.

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

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

   

Como mencionado acima, a barra de pesquisa também é compatível com seletores CSS e XPath.

O painel Elementos 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, pode fazer o DevTools executar a pesquisa apenas quando você pressionar Enter.

Para evitar saltos desnecessários entre os nós, desmarque a caixa de seleção Configurações > Preferências > Global > Pesquisar enquanto você digita.

Editar o DOM

Você pode editar o DOM rapidamente e ver como essas alterações afetam a página.

Editar conteúdo

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

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

   • Fritura
   • 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 foi 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
   • Vicente

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

   

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

   

Você também pode usar a opção de clicar com o botão direito do mouse em Editar atributo.

Editar tipo de nó

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

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

   • Decano
   • Kibon
   • Tadeu
   • Brock

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

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 o preenchimento automático e o destaque de sintaxe, 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
   • Roberto
   • Leonard

2. No painel Elementos, 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. A DevTool destaca a sintaxe HTML e preenche automaticamente as tags para você.

   

4. Selecione o elemento li no menu de preenchimento automático e digite >. O DevTools adiciona automaticamente a tag de fechamento </li> 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 de clique com o botão direito do mouse em Duplicar elemento.

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

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

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

   

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

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

Fazer uma captura de tela do nó

Você pode fazer uma captura de tela de qualquer nó individual da árvore do DOM usando a opção Capturar tela do nó.

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

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

   

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

   

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. Observe que é o último item da lista.

   • Stevie maravilha
   • Tom espera
   • Chris thile
   • Elvis presley

2. Na árvore do DOM, arraste <li>Elvis Presley</li> para o topo 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 punição
   • 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 caso essa opção não apareça. A cor de fundo permanece laranja, mesmo que você não esteja realmente passando 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 Inspect.

   • O Conde de Monte Cristo
   • As estrelas, meu destino

2. Pressione a tecla H. O nó está oculto. Também é possível 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ó é exibido novamente.

Excluir um nó

Pressione Delete para excluir um nó.

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

   • O Homem Ilustrado
   • Pela lente
   • Base

2. Pressione a tecla Delete. O nó foi 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

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

Referenciar o nó selecionado no momento com $0

Ao inspecionar um nó, o texto == $0 ao lado dele significa que é possível referenciar esse nó no Console com a variável $0.

1. Clique com o botão direito do mouse em A mão esquerda do escuro abaixo e selecione Inspecionar.

   • A mão esquerda das trevas
   • Duna

2. Pressione a tecla Esc 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ó será destacado na janela de visualização.

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

   

Armazenar como variável global

Se você precisar consultar 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 Inspect.

   • O Sono Grande
   • A longa despedida

2. Clique com o botão direito do mouse em <li>The Big Sleep</li> na árvore do DOM e selecione Armazenar como variável global. Consulte o Apêndice: opções ausentes caso essa opção não apareça.

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

   

Copiar caminho JS

Copie o caminho JavaScript para um nó quando precisar referenciá-lo em um teste automatizado.

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

   • Irmãos Karamazov
   • Crime e punição

2. Clique com o botão direito do mouse em <li>The Brothers Karamazov</li> na árvore do DOM e selecione Copy > Copy JS Path. Uma expressão document.querySelector() 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 quando houver mudanças no DOM

Ele permite pausar o JavaScript da página quando o JavaScript modifica o DOM. Consulte Pontos de interrupção de mudança DOM.

Próximas etapas

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

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

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

Apêndice: HTML x 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 como este:

<!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 como esta:

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. Agora ele tem a mesma aparência do HTML, mas suponha que o script referenciado na parte inferior 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

Agora, o HTML da página é diferente do DOM. Em outras palavras, o HTML representa o conteúdo da página inicial, e o DOM representa o conteúdo da página atual. 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 visualizar

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 ser selecionado na árvore do DOM. Caso contrário, volte para Rolar para visualização e comece de novo.

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

   

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 do DOM e, em seguida, selecionar uma opção no menu de contexto que aparece. Se a opção especificada não for exibida no menu de contexto, tente clicar com o botão direito do mouse fora do texto do nó.