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

Kayce Basques
Kayce Basques
X GitHub Falha
Sofia Emelianova
Sofia Emelianova
GitHub

Assista ao vídeo e conclua esses tutoriais interativos para aprender os fundamentos de visualização e alterar o 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 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, Inspecionar é uma maneira rápida de abrir o DevTools e investigar o nó.

  1. Clique com o botão direito do mouse em Michelangelo abaixo e selecione Inspecionar.
    • Michelangelo
    • Rafael Como inspecionar um nó O painel Elements do DevTools é aberto. <li>Michelangelo</li> está em destaque na Árvore DOM. As melhores vistas de Michelangelo< nó
  2. Clique no ícone Inspecionar no canto superior esquerdo do do DevTools. O ícone &quot;Inspecionar&quot;

  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 na árvore do DOM usando sua teclado.

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

    • George
    • Ringo
    • Paul

    • João

      Como inspecionar o nó Ringo

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

    Como inspecionar o nó UL

  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> é selecionada. 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 o <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ê vai se interessar por um nó do DOM que não estão na janela de visualização. Por exemplo, suponha que você tenha rolado até a parte inferior se tiver interesse no nó <h1> na parte de cima da página. Rolar para a visualização permite reposicionar rapidamente a janela de visualização para poder 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 Elements.

Réguas.

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 > Elements > Mostrar réguas ao passar o cursor.

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

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

  1. Foque o cursor no painel Elements.
  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.

    Destaque da consulta na barra de pesquisa

Como mencionado acima, a barra de pesquisa também é compatível com 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, pode fazer o DevTools executar a pesquisa apenas quando você pressionar Enter.

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

Caixa de seleção &quot;Pesquisar enquanto você digita&quot; em &quot;Configurações&quot; desmarcada.

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.

    Editar o texto

  3. Exclua Michelle, digite Leela e pressione Enter para confirmar a mudança. O texto acima das mudanças 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.

    Como editar o nó

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

    Adicionar um atributo de estilo ao nó

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

Opções de clique com o botão direito do mouse com atributo de edição destacado.

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
    • Thaddeus
    • 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 <button> nó.

    Alterando o tipo de nó para botão

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

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

    O menu suspenso de um nó.

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

    Preenchimento automático de tags HTML.

  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.

    O DevTools fecha a tag automaticamente.

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

    Aplicando 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 Elements, clique com o botão direito do mouse em <li>Nana</li> e selecione Elements no menu suspenso.

    A opção &quot;Duplicar elemento&quot; destacada 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 Elements, clique com o botão direito do mouse no URL da imagem e selecione Elements no menu suspenso.

    Captura de tela do nó sendo feita.

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

    Captura de tela do nó salva nos 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. Observe que é o último item na lista.

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

  2. Na árvore do DOM, arraste <li>Elvis Presley</li> para o topo da lista.

    Arrastar o nó 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 esteja disponível. 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.

    Como o nó aparece na árvore do DOM depois de ser ocultado

  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
    • Através do olhar
    • 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 a partir do console ou para obter que contêm referências 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 fazer referência a ele no console pela variável $0.

  1. Clique com o botão direito do mouse em A mão esquerda da escuridão 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 retorna <li>The Left Hand of Darkness</li>.

    O resultado da primeira expressão $0 no console

  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 novamente e pressione Digite novamente. Agora, $0 é avaliado como <li>Dune</li>.

    O resultado da segunda expressão $0 no Console

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 global variável. 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 avalia para o nó.

    O resultado da expressão temp1

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 Copiar > Copiar caminho do JS. Uma expressão document.querySelector() que se refere ao nó foi copiado para a área de transferência.

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

  4. Pressione Enter para avaliar a expressão.

    O resultado da expressão &quot;Copy JS Path&quot;

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 em nós na árvore do DOM e testando as outras opções que não estavam abordadas neste tutorial. Consulte também Atalhos de teclado do painel Elementos.

Confira a página inicial do Chrome DevTools para saber tudo outras coisas que você pode fazer com DevTools.

Acesse a Comunidade se quiser entrar em contato com a equipe do DevTools ou da comunidade do DevTools.

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 tenha referenciado no do HTML executa 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 parece assim:

html
  head
    title
  body
    p
    script
    p

Agora, o HTML da página é diferente do DOM. Em outras palavras, HTML representa o conteúdo da página inicial, e o DOM representa o conteúdo da página atual. Quando JavaScript adicionar, remover ou editar nós, o DOM ficará 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 o 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 Role até a 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 rolagem da janela de visualização para cima para ver o nó Magritte. Consulte o Apêndice: opções ausentes se você não encontrar a opção Rolar para visualização.

    Rolar para a visualização

Apêndice: opções ausentes

Muitas instruções deste tutorial instruem você a clicar com o botão direito do mouse em um nó na árvore do DOM e selecione uma opção no menu de contexto que aparece. Se você não vir o valor especificado no menu de contexto, tente clicar com o botão direito do mouse fora do texto do nó.

Onde clicar se você não estiver vendo todas as opções