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

Para saber as noções básicas sobre como ver e alterar o Modelo de Objeto de Documento (DOM) de uma página com o Microsoft Edge DevTools, siga estas secções interativas do tutorial.

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

Ver nós do DOM

A árvore DOM da ferramenta Elementos é onde faz todas as atividades relacionadas com DOM em DevTools.

Inspecionar um nó

Quando estiver interessado num nó DOM específico, Inspecionar é uma forma rápida de abrir o DevTools e investigar esse nó.

1. Abra a página de demonstração Exemplos do DOM numa nova janela ou separador. (Para abrir uma ligação numa nova janela ou separador, clique com o botão direito do rato na ligação. Em alternativa, prima sem soltar Ctrl (Windows, Linux) ou Comando (macOS) e, em seguida, clique na ligação.)

1. Na página Web composta, em Inspecionar um Nó, clique com o botão direito do rato em Miguel Ângelo e, em seguida, selecione Inspecionar:

   

   É aberta a ferramenta Elementos de DevTools. O <p>Michelangelo</p> nó está realçado na Árvore DOM:

   

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

   

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

Inspecionar um nó é também o primeiro passo para ver e alterar os estilos de um nó. Veja Introdução à visualização e alteração do CSS.

Navegar na Árvore DOM com um teclado

Depois de selecionar um nó na Árvore do DOM, pode navegar na Árvore DOM com o teclado.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Navegar na Árvore DOM com um Teclado, clique com o botão direito do rato em Toque e, em seguida, selecione Inspecionar. <p>Ringo</p> está selecionado na Árvore DOM:

   

3. Prima a tecla Seta Para Cima duas vezes. <div> está selecionado:

   

4. Prima a tecla Seta Para a Esquerda . A <div> lista é fechada.

5. Prima novamente a tecla Seta Para a Esquerda . O elemento principal do <div> nó está selecionado. Neste caso, é o que tem o <section> ID navigate-the-dom-tree-with-a-keyboard-1.

6. Prima a tecla Seta Para Baixo duas vezes, para que tenha selecionado novamente a <div> lista que acabou de fechar.

   Deverá ter o seguinte aspeto: <div>... </div>.

7. Prima a tecla Seta Para a Direita . A lista é expandida.

Deslocar para a vista

Ao ver a Árvore DOM, poderá estar interessado num nó DOM que não esteja atualmente visível na página Web composta. Por exemplo, suponha que se deslocou para a parte inferior da página e que está interessado no <h1> nó na parte superior da página. Deslocar-se para a vista permite-lhe reposicionar rapidamente a janela viewport para que possa ver o nó.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Deslocar para Vista, clique com o botão direito do rato em Magritte e, em seguida, selecione Inspecionar.

3. Desloque-se para a parte inferior da página Exemplos do DOM.

4. O <p>Magritte</p> nó ainda deve estar selecionado na árvore DOM. Caso contrário, volte a Deslocar-se para a vista e recomece.

5. Clique com o botão direito do rato no <p>Magritte</p> nó e, em seguida, selecione Deslocar para a vista:

   

   A janela viewport desloca-se novamente para cima para apresentar o nó Magritte . Consulte Apêndice: Opções em falta se a opção Deslocar para a vista não for apresentada.

Procurar nós

Pode procurar na Árvore DOM por cadeia, seletor CSS ou seletor XPath.

1. Concentre o cursor na ferramenta Elementos , como ao clicar no separador Elementos .

2. Prima Ctrl+F (Windows, Linux) ou Comando+F (macOS). A Barra de pesquisa é aberta na parte inferior da Árvore DOM.

3. Escreva A Lua é uma Senhora Dura. A última frase está realçada na Árvore DOM:

   

A Barra de pesquisa também suporta seletores de CSS e XPath.

Editar o DOM

Pode editar o DOM em 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ó, faça duplo clique no conteúdo na Árvore DOM, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Editar Conteúdo, clique com o botão direito do rato em Michelle e, em seguida, selecione Inspecionar.

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

   

4. Elimine Michelle, escreva Leelae, em seguida, prima Enter para confirmar a alteração. O texto no DOM muda de Michelle para Leela.

Editar ou adicionar atributos

Para editar um atributo existente, faça duplo clique no nome ou valor do atributo.

Para adicionar um novo atributo, faça duplo clique no elemento para o qual pretende adicionar um atributo, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Editar Atributos, clique com o botão direito do rato em Howard e, em seguida, selecione Inspecionar.

3. Faça duplo clique em <p>. O texto é realçado para indicar que o nó está selecionado:

   

4. Prima a tecla Seta Para a Direita , adicione um espaço, escreva style="background-color:gold"e, em seguida, prima Enter. A cor de fundo do nó muda para gold:

   

Editar nome da etiqueta do nó

Para editar o nome da etiqueta de um nó, faça duplo clique no nome da etiqueta e, em seguida, escreva o novo nome da etiqueta.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Editar Nome da Etiqueta de Nó, clique com o botão direito do rato em Hank e, em seguida, selecione Inspecionar.

3. Faça duplo clique em <p>. O texto p está realçado.

4. Elimine p, escreva buttone, em seguida, prima Enter. O <p> nó muda para um <button> nó:

   

Editar vários nós, texto e atributos

Para alterar o nome da etiqueta, o conteúdo de texto ou os atributos de vários nós ao mesmo tempo, pode editar parte do DOM com o editor de texto HTML da árvore do DOM, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, clique com o botão direito do rato na secção Editar Conteúdo, Nome da Etiqueta e Atributos e, em seguida, selecione Inspecionar.

3. Na Árvore DOM, clique com o botão direito do rato no <section id="edit-as-html-1"> nó e, em seguida, selecione Editar como HTML. O editor de HTML é apresentado na árvore DOM, com uma caixa à volta da secção que está a ser editada:

   

4. Escreva as alterações que pretende fazer no editor de HTML, tais como:

   • Adicionar, eliminar ou editar atributos.
   • Adicionar ou eliminar nós.
   • Editar o conteúdo de texto ou os nomes das etiquetas dos nós.

   Por exemplo, adicione <p>Dijon</p> depois da <p>Marseille</p> linha.

5. Clique na árvore DOM fora do editor de HTML ou prima Ctrl+Enter. As edições são aplicadas à árvore DOM e à página Web composta e o editor de HTML fecha:

   

Reordenar nós DOM

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

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

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

3. Na Árvore DOM, arraste <p>Elvis Presley</p> para o topo da lista:

   

Estado da força

Pode forçar os nós a permanecerem nos estados, incluindo :active, :hover, :focus, :visitede :focus-within, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, sob o estado Force, paire sobre O Senhor das Moscas. A cor de fundo torna-se laranja.

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

4. Clique com o botão direito do rato e, em <p class="demo--hover">The Lord of the Flies</p>seguida, selecione Forçar Estado>:pairar. Se essa opção não for apresentada, consulte Apêndice: Opções em falta, abaixo. A cor de fundo permanece cor de laranja, mesmo que não esteja realmente a pairar sobre o nó.

Ocultar um nó

Prima H para ocultar um nó, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Ocultar um nó, clique com o botão direito do rato em As Estrelas O Meu Destino e, em seguida, selecione Inspecionar.

3. Prima a tecla H . O nó está oculto na página Web composta:

   

4. Prima novamente a tecla H . O nó é apresentado novamente.

Excluir um nó

Prima Delete para eliminar um nó, da seguinte forma:

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Eliminar um Nó, clique com o botão direito do rato em Fundação e, em seguida, selecione Inspecionar.

3. Prima Delete. O nó é eliminado.

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

Aceder a nós na Consola

O DevTools fornece alguns atalhos para aceder aos nós DOM a partir da ferramenta Consola ou obter referências javaScript para cada um deles.

Referenciar o nó atualmente selecionado com $0

Quando inspeciona um nó, o == $0 texto junto ao nó significa que pode referenciar este nó na Consola com a variável $0.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

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

3. Prima a tecla Esc para abrir a ferramenta Consola no painel Vista Rápida .

4. Escreva $0 e prima Enter. O resultado da expressão mostra que $0 avalia como <p>The Left Hand of Darkness</p>:

   

5. Paire o cursor sobre o resultado. O nó está realçado na janela viewport.

6. Clique <p>Dune</p> na Árvore DOM, escreva $0 novamente na Consola e, em seguida, prima Enter novamente. Agora, $0 avalia como <p>Dune</p>:

   

Armazenar como variável global

Se precisar de fazer referência a um nó muitas vezes, armazene-o como uma variável global.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Armazenar como variável global, clique com o botão direito do rato em A Suspensão Grande e, em seguida, selecione Inspecionar.

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

4. Escreva temp1 na Consola e, em seguida, prima 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 de referenciá-lo num teste automatizado.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

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

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

4. Prima Ctrl+V (Windows, Linux) ou Comando+V (macOS) para colar a expressão na ferramenta Consola .

5. Prima Enter para avaliar a expressão. A expressão Copiar Caminho do JS é avaliada para o nó:

   

Interromper as alterações do DOM

O DevTools permite-lhe colocar em pausa o JavaScript de uma página quando o JavaScript modifica o DOM.

Interromper as modificações de atributos

Utilize pontos de interrupção de modificação de atributos quando quiser colocar em pausa o JavaScript que faz com que qualquer atributo de um nó seja alterado.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Interromper as modificações de atributos, clique com o botão direito do rato em Sauerkraut e, em seguida, selecione Inspecionar.

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

   

   Consulte Apêndice: Opções em falta se a opção não for apresentada.

4. Clique no botão Definir Fundo . Isto define o style atributo do nó como background-color:thistle. DevTools coloca a página em pausa e realça o código que fez com que o atributo mudasse na ferramenta Origens :

   

5. Clique em Retomar Script () para retomar a execução de JavaScript.

Remoção de quebras no nó

Se quiser colocar em pausa quando um determinado nó for removido, utilize pontos de interrupção de remoção de nós.

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

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

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

4. Clique no botão Eliminar acima. DevTools coloca a página em pausa e realça o código que fez com que o nó fosse removido.

5. Selecione Retomar Script ().

Interromper as modificações de subárvore

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

1. Abra a página de demonstração DoM Examples numa nova janela ou separador.

2. Na página Web composta, em Quebra em Modificações de Subárvore, clique com o botão direito do rato em A Fire Upon The Deep e, em seguida, selecione Inspecionar.

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

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

5. Selecione Retomar Script ().

Próximas etapas

Isto abrange a maioria das funcionalidades relacionadas com DOM no DevTools. Pode descobrir as restantes funcionalidades ao clicar com o botão direito do rato em nós na Árvore do DOM e experimentar as outras opções que não foram abordadas neste tutorial. Consulte também Atalhos de teclado da ferramenta Elementos.

Consulte Descrição geral do DevTools para descobrir tudo o que pode fazer com o DevTools.

Apêndice: HTML versus DOM

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

Quando utiliza um browser para pedir uma página, o servidor devolve código HTML da seguinte forma:

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

Em seguida, o browser analisa o HTML e cria uma árvore de objetos com base no HTML da seguinte forma:

html
    head
        title
    body
        h1
        p
        script

Esta árvore de objetos, ou nós, que representa o conteúdo da página é denominada Modelo de Objeto de Documento (DOM). Neste momento, a árvore DOM tem o mesmo aspeto que o HTML, mas suponha que o script referenciado na parte inferior do HTML executa 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 tem agora o seguinte aspeto:

html
    head
        title
    body
        p
        script
        p

O HTML da página é agora diferente do respetivo DOM. Por outras palavras, 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 torna-se diferente do HTML.

Veja Introdução ao DOM para saber mais.

Apêndice: Opções em falta

Muitas das instruções neste tutorial indicam-lhe para clicar com o botão direito do rato num nó na Árvore do DOM e, em seguida, selecionar uma opção no menu de contexto apresentado. Se a opção especificada não estiver listada no menu de contexto, clique com o botão direito do rato no texto do nó ou clique no ... botão à esquerda do nó:

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.