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

Para aprender as noções básicas de exibição e alteração do Modelo de Objeto do Documento (DOM) de uma página usando o Microsoft Edge DevTools, siga estas seções interativas do tutorial.

Para entender a diferença entre o DOM e o HTML, consulte o Apêndice: HTML versus DOM, abaixo.

Exibir nós DOM

A Árvore DOM da ferramenta Elementos é onde você realiza todas as atividades relacionadas ao DOM no DevTools.

Inspecionar um nó

Quando você estiver interessado em um nó DOM específico, Inspecionar é uma maneira rápida de abrir o DevTools e investigar esse nó.

1. Abra a página de demonstração de Exemplos de DOM em uma nova janela ou guia. (Para abrir um link em uma nova janela ou guia, clique com o botão direito do mouse no link. Ou pressione e segure Ctrl (Windows, Linux) ou Command (macOS) e clique no link.)

1. Na página da Web renderizada, em Inspecionar um Nó, clique com o botão direito do mouse em Michelangelo e selecione Inspecionar:

   

   A ferramenta Elementos do DevTools é aberta. O <p>Michelangelo</p> nó é realçado na Árvore DOM:

   

2. Clique no ícone Inspecionar () no canto superior esquerdo do DevTools:

   

3. Em Inspecionar um nó, clique no texto Tóquio . Agora, <p>Tokyo</p> o nó é realçado na Árvore DOM.

Inspecionar um nó também é a primeira etapa para visualizar e alterar os estilos de um nó. Confira Introdução à exibição e alteração do CSS.

Navegar na Árvore DOM com um teclado

Depois de selecionar um nó na Árvore DOM, você poderá navegar na Árvore DOM com o teclado.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Navegar na Árvore DOM com um teclado, clique com o botão direito do mouse em Ringo e selecione Inspecionar. <p>Ringo</p> está selecionado na Árvore DOM:

   

3. Pressione a tecla Seta para cima duas vezes. <div> está selecionado:

   

4. Pressione a tecla Seta para a esquerda. A <div> lista é recolhida.

5. Pressione a tecla Seta para a esquerda novamente. O pai do <div> nó é selecionado. Nesse caso, é o <section> que tem a ID navigate-the-dom-tree-with-a-keyboard-1.

6. Pressione a tecla Seta para baixo duas vezes, de modo que você tenha selecionado novamente a <div> lista que acabou de recolher.

   Deve ficar assim: <div>... </div>.

7. Pressione a tecla Seta para a direita. A lista se expande.

Rolar para a exibição

Ao exibir a Árvore DOM, você pode se interessar por um nó DOM que não está visível no momento na página da Web renderizada. Por exemplo, suponha que você tenha rolado a tela até a parte inferior da página e esteja interessado no <h1> nó na parte superior da página. Rolar para a exibição permite reposicionar rapidamente a viewport para que você possa ver o nó.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Rolar para Exibir, clique com o botão direito do mouse em Magritte e selecione Inspecionar.

3. Role até a parte inferior da página Exemplos de DOM.

4. O <p>Magritte</p> nó ainda deve estar selecionado na Árvore DOM. Caso contrário, volte para Rolar para exibição e comece de novo.

5. Clique com o botão direito do mouse no <p>Magritte</p> nó e selecione Rolar para exibição:

   

   Sua janela de visualização rola para cima para exibir o nó de Magritte . Consulte Apêndice: Opções ausentes se a opção Rolar para a exibição não for exibida.

Pesquisar nós

Você pode pesquisar a Árvore DOM por string, seletor CSS ou seletor XPath.

1. Concentre o cursor na ferramenta Elementos , por exemplo, clicando na guia Elementos .

2. Pressione Ctrl+F (Windows, Linux) ou Command+F (macOS). A barra de Pesquisa é aberta na parte inferior da Árvore DOM.

3. Tipo : A Lua é uma amante severa. A última frase é realçada na Árvore DOM:

   

A barra de pesquisa também dá suporte aos seletores CSS e XPath.

Editar o DOM

Você pode editar o DOM no DevTools e ver como as alterações afetam a página em tempo real.

Editar conteúdo de texto

Para editar o conteúdo de texto de um nó, clique duas vezes no conteúdo da Árvore DOM, da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Editar Conteúdo, clique com o botão direito do mouse em Michelle e selecione Inspecionar.

3. Na Árvore DOM, clique duas vezes no texto Michelle, entre as <p> marcas e .</p> O texto é realçado para indicar que está selecionado:

   

4. Exclua Michelle, digite Leelae pressione Enter para confirmar a alteração. O texto no DOM muda de Michelle para Leela.

Editar ou adicionar atributos

Para editar um atributo existente, clique duas vezes no nome ou no valor do atributo.

Para adicionar um novo atributo, clique duas vezes no elemento para o qual deseja adicionar um atributo, da seguinte forma:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Editar atributos, clique com o botão direito do mouse em Howard e selecione Inspecionar.

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

   

4. Pressione a tecla Seta para a direita , adicione um espaço, digite style="background-color:gold"e pressione Enter. A cor de fundo do nó é alterada para dourada:

   

Editar nome da marca de nó

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

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Editar Nome da Marca do Nó, clique com o botão direito do mouse em Hank e selecione Inspecionar.

3. Clique duas vezes em <p>. O texto p é realçado.

4. Exclua p, digite buttone pressione Enter. O <p> nó muda para um <button> nó:

   

Editar vários nós, texto e atributos

Para alterar o nome da marca, o conteúdo de texto ou os atributos de vários nós de uma só vez, você pode editar parte do DOM usando o editor de texto HTML da árvore DOM, da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, clique com o botão direito do mouse na seção Editar Conteúdo, Nome da Marca e Atributos e selecione Inspecionar.

3. Na Árvore DOM, clique com o botão direito do mouse no <section id="edit-as-html-1"> nó e selecione Editar como HTML. O editor HTML aparece dentro da árvore DOM, com uma caixa ao redor da seção que está sendo editada:

   

4. Digite as alterações que você deseja fazer no editor de HTML, como:

   • Adicionar, excluir ou editar atributos.
   • Adicionando ou excluindo nós.
   • Editar o conteúdo de texto ou os nomes das tags dos nós.

   Por exemplo, adicione <p>Dijon</p> após a <p>Marseille</p> linha.

5. Clique na árvore DOM fora do editor de HTML ou pressione Ctrl+Enter. Suas edições são aplicadas à árvore DOM e à página da Web renderizada, e o editor de HTML é fechado:

   

Reordenar nós DOM

Para reordenar nós na árvore DOM, arraste os nós da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Reordenar Nós DOM, clique com o botão direito do mouse em Elvis Presley e selecione Inspecionar.

3. Na Árvore DOM, arraste <p>Elvis Presley</p> para a parte superior da lista:

   

Forçar estado

Você pode forçar os nós a permanecerem em estados como :active, :hover, , :focus:visitede :focus-within, da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da web renderizada, no estado Forçar, passe o mouse sobre O Senhor das Moscas. A cor da tela de fundo se torna laranja.

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

4. Clique com o botão direito do mouse <p class="demo--hover">The Lord of the Flies</p>e selecione Forçar Estado>:passar o mouse. Se essa opção não for exibida, consulte Apêndice: opções ausentes, abaixo. A cor do plano de fundo permanece laranja, mesmo que você não esteja realmente passando o mouse sobre o nó.

Ocultar um nó

Pressione H para ocultar um nó, da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Ocultar um nó, clique com o botão direito do mouse em The Stars My Destination e selecione Inspecionar.

3. Pressione a tecla H . O nó está oculto da página da Web renderizada:

   

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

Excluir um nó

Pressione Delete para excluir um nó, da seguinte maneira:

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Excluir um nó, clique com o botão direito do mouse em Fundação e selecione Inspecionar.

3. Pressione Delete. O nó é excluído.

4. Pressione Ctrl+Z (Windows, Linux) ou Command+Z (macOS). A última ação é desfeita e o nó reaparece.

Nós de acesso no Console

O DevTools fornece alguns atalhos para acessar nós DOM na ferramenta Console ou obter referências JavaScript para cada um.

Referencie o nó selecionado no momento com $0

Ao inspecionar um nó, o == $0 texto ao lado do nó significa que você pode fazer referência a esse nó no Console com a variável $0.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Referenciar o nó atualmente selecionado com $0, clique com o botão direito do mouse em A Mão Esquerda da Escuridão e selecione Inspecionar.

3. Pressione a tecla Esc para abrir a ferramenta Console no painel Visualização Rápida .

4. Digite $0 e pressione Enter. O resultado da expressão mostra que $0 é avaliado como <p>The Left Hand of Darkness</p>:

   

5. Passe o mouse sobre o resultado. O nó é realçado na janela de exibição.

6. Clique <p>Dune</p> na Árvore DOM, digite $0 na Console novamente e pressione Enter novamente. Agora, $0 é avaliado como <p>Dune</p>:

   

Armazenar como variável global

Se você precisar consultar um nó muitas vezes, armazene-o como uma variável global.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Armazenar como variável global, clique com o botão direito do mouse em The Big Sleep e selecione Inspecionar.

3. Clique com o botão direito do mouse <p>The Big Sleep</p> na Árvore DOM e selecione Armazenar como variável global. Se essa opção não for exibida, consulteApêndice: opções ausentes, abaixo.

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

   

Copiar caminho do JS

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

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Copiar caminho JS, clique com o botão direito do mouse em The Brothers Karamazov e selecione Inspecionar.

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

4. Pressione Ctrl+V (Windows, Linux) ou Command+V (macOS) para colar a expressão na ferramenta Console.

5. Pressione Enter para avaliar a expressão. A expressão Copy JS Path é avaliada como o nó:

   

Interromper alterações no DOM

O DevTools permite pausar o JavaScript de uma página quando o JavaScript modifica o DOM.

Quebra em modificações de atributo

Use pontos de interrupção de modificação de atributo quando quiser pausar o JavaScript que faz com que qualquer atributo de um nó seja alterado.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Interromper modificações de atributo, clique com o botão direito do mouse em Chucrute e selecione Inspecionar.

3. Na Árvore DOM, clique com o botão direito do mouse <p id="botm_target">Sauerkraut</p>e selecione Interromper em>Modificações de Atributo:

   

   Consulte Apêndice: Opções ausentes se a opção não for exibida.

4. Clique no botão Definir Plano de Fundo . Isso define o style atributo do nó para background-color:thistle. O DevTools pausa a página e realça o código que causou a alteração do atributo na ferramenta Fontes :

   

5. Clique em Retomar script () para retomar a execução do JavaScript.

Interromper na remoção do nó

Se você quiser pausar quando um nó específico for removido, use pontos de interrupção de remoção de nó.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Interromper na Remoção do Nó, clique com o botão direito do mouse em Neuromancer e selecione Inspecionar.

3. Na Árvore DOM, clique com o botão direito do mouse <p id="target">Neuromancer</p>e selecione Interromper na Remoção>de Nó. Consulte Apêndice: Opções ausentes se a opção não for exibida.

4. Clique no botão Excluir acima. O DevTools pausa a página e realça o código que causou a remoção do nó.

5. Selecione Retomar script ().

Interromper modificações de subárvore

Depois de colocar um ponto de interrupção de modificação de subárvore em um nó, o DevTools pausa a página quando qualquer um dos descendentes do nó é adicionado ou removido.

1. Abra a página de demonstração Exemplos de DOM em uma nova janela ou guia.

2. Na página da Web renderizada, em Quebrar Modificações na Subárvore, clique com o botão direito do mouse em A Fire Upon The Deep e selecione Inspecionar.

3. Na Árvore DOM, clique com o botão direito do mouse em <div id="ul_target">, que é o nó acima <p>A Fire Upon the Deep</p>, e selecione Interromper Modificações de>Subárvore. Se o comando Subtree Modifications não aparecer, consulte Apêndice: Opções ausentes.

4. Clique em Adicionar Filho. O código pausa porque um <p> nó foi adicionado à lista.

5. Selecione Retomar script ().

Próximas etapas

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

Confira Visão geral do DevTools para descobrir tudo o mais que você pode fazer com o DevTools.

Apêndice: HTML versus DOM

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

Quando você usa um navegador da Web para solicitar uma página, o servidor retorna um código 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 então analisa o HTML e cria uma árvore de objetos com base no HTML 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 Modelo de Objeto do Documento (DOM). No momento, a árvore DOM é igual ao HTML, mas suponha que o script referenciado na parte inferior do HTML execute o seguinte 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 h1 nó e adiciona outro p nó ao DOM. O DOM completo agora tem esta aparência:

html
    head
        title
    body
        p
        script
        p

O HTML da página agora é diferente de seu DOM. Em outras palavras, o HTML representa o conteúdo inicial da página 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: 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, em seguida, selecionar uma opção no menu de contexto que aparece. Se a opção especificada não estiver listada no menu de contexto, clique com o botão direito do mouse fora do texto do nó ou clique no ... botão à esquerda do nó:

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.