Interagir com o DOM usando o console

A ferramenta Console é uma ótima maneira de interagir com a página da Web no navegador. No DevTools, você geralmente interage com o DOM usando a ferramenta Inspecionar para selecionar elementos e usando a ferramenta Elementos para modificar o DOM, por exemplo, para adicionar ou alterar atributos ou estilos de elementos.

A ferramenta Console também pode ser usada para interagir com o DOM usando código JavaScript. Por exemplo, você pode localizar elementos na árvore DOM e manipulá-los usando APIs DOM.

Para saber mais sobre a ferramenta Inspecionar , consulte Analisar páginas usando a ferramenta Inspecionar. Para saber mais sobre a ferramenta Elementos , consulte Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos.

Localizar um elemento na árvore DOM

Para localizar um elemento na árvore DOM a partir da ferramenta Console :

  1. Vá para a página da Web que você deseja inspecionar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Digite ou cole o seguinte código no Console e pressione Enter.

    document.querySelector('main');

    O <main> elemento da árvore DOM é exibido no Console:

    A ferramenta Console do DevTools, mostrando a expressão document.querySelector e o elemento principal resultante

  4. No Console, passe o mouse sobre o elemento HTML <main> resultante ou pressione Shift+Tab. Na página da Web renderizada, o DevTools realça o elemento correspondente <main> :

    O elemento principal, realçado na página da Web renderizada

Alterar o DOM da página da Web

Você pode fazer alterações na árvore DOM da página da Web a partir da ferramenta Console . Neste exemplo, você define o valor de um atributo de elemento DOM usando o Console, para afetar o estilo do elemento: você adiciona um plano de fundo cinza ao <h1> título da página.

  1. Vá para a página da Web que você deseja alterar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Cole o seguinte código no Console:

    document.querySelector("h1").style.backgroundColor = "lightgrey";

    Um fundo cinza aparece atrás do título da página:

    A ferramenta Console, mostrando o código JavaScript acima, e a página da Web mostrando o título cinza

Obter uma referência a um elemento

Em uma página da Web complexa, pode ser difícil encontrar o elemento certo para alterar. Mas você pode usar a ferramenta Inspecionar para ajudá-lo. Suponha que você queira alterar o texto do primeiro link dentro do elemento Seção 1 da página renderizada:

O link que você deseja alterar na página

Para obter uma referência ao elemento de vínculo que você deseja alterar:

  1. Vá para a página da Web que você deseja inspecionar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Clique na ferramenta Inspecionar (ícone da ferramenta Inspecionar) e, na página da Web renderizada, passe o mouse sobre um link, como o Link 1:

    Quando você passa o mouse sobre um link ao usar a ferramenta Inspecionar, o link é realçado

  4. Clique no link em destaque na página da Web renderizada. O DevTools abre a ferramenta Elementos , com o elemento correspondente selecionado:

    A ferramenta Elementos no DevTools, com o elemento de link selecionado

  5. Clique no ... botão ao lado do elemento na árvore DOM e selecione Copiar>Copiar caminho JS:

    O item de menu Copiar caminho JS na ferramenta Elementos

    Aqui está o caminho do JS que você copiou:

    document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a")

    O caminho acima é um seletor CSS que aponta para o elemento de link selecionado usando a ferramenta Inspecionar .

  6. No Console, cole o caminho do JavaScript que você copiou, mas não pressione Enter ainda.

  7. Altere o texto do link para Updated link. Para fazer isso, adicione .textContent = "Updated link" ao caminho JavaScript que você colou anteriormente:

    A ferramenta Console, com o caminho JS e a expressão textContent, e a página da Web, mostrando o texto atualizado do link

Use todas as APIs DOM que você deseja alterar na árvore DOM no Console. Para torná-lo mais conveniente, o console vem com alguns métodos utilitários auxiliares.

Funções úteis do utilitário do console

Muitos métodos convenientes e atalhos estão disponíveis para você como funções de utilitário na ferramenta Console . Algumas dessas funções de utilitário são muito úteis para interagir com a árvore DOM de uma página da Web e são descritas abaixo. Para saber mais, consulte Seletores e funções do utilitário da ferramenta de console.

Obtenha elementos com as funções e atalhos $

O $ caractere tem um significado especial na ferramenta Console :

  • As $() funções and $$() são versões mais curtas das document.querySelector() funções and document.querySelectorAll() .

  • $0, $1, $2, $3e $4 são atalhos para elementos que você selecionou recentemente na ferramenta Elementos . $0 é sempre o elemento selecionado mais recentemente. Portanto, no exemplo anterior Obtenha uma referência a um elemento, depois de selecionar o elemento usando a ferramenta Inspecionar , você pode alterar seu texto usando $0.textContent = "Updated link" para obter o mesmo efeito.

  • $x() permite selecionar elementos DOM usando XPath.

Obter todos os links da página

Neste exemplo, use a $$() função de utilitário para listar todos os links na página da Web. Em seguida, você usa essa função junto com o filter() método de matriz para se livrar dos links que não começam ( https como os links âncora na página da web atual), a fim de filtrar a lista para incluir apenas links externos.

  1. Vá para a página da Web da qual você deseja obter os links. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Para obter a lista de todos os links na página, insira o seguinte código no Console e pressione Enter:

    $$('a');

    O resultado da função $$('a') no Console, que é uma matriz de elementos

    $$('a') é a abreviação de document.querySelectorAll('a').

  4. Expanda a lista de links registrados no Console e expanda o primeiro objeto de link. As propriedades do link são exibidas:

    Expandindo o primeiro elemento da matriz, suas propriedades são exibidas

  5. Para reduzir a quantidade de informações retornadas pela $$() função, use o map() método array. O map() método funciona porque a $$() função retorna uma matriz.

    $$('a').map(a => {
  return {url: a.getAttribute("href"), text: a.innerText}
});

    O código acima retorna uma matriz de todos os links, onde cada objeto de link é mapeado para um objeto JavaScript com as url propriedades and text .

  6. Expanda alguns dos objetos de link retornados para ver suas propriedades:

    A lista de links na página, com o texto de cada link e o atributo href

  7. Para listar apenas links externos, use o filter() método array para se livrar dos links que não começam com https:

    $$('a').map(a => {
   return {url: a.getAttribute("href"), text: a.innerText}
}).filter(a => {
   return a.url.startsWith("https");
});

    A lista de links externos na página

Exibir elementos DOM em uma tabela

No exemplo anterior, você exibiu uma lista de elementos da página no Console. Os elementos são exibidos como uma matriz JavaScript. Para facilitar o uso da lista de elementos no Console, você pode exibi-los em uma tabela classificável, usando a função utilitária console.table() :

  1. Vá para a página da Web que você deseja inspecionar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Cole o seguinte código no Console e pressione Enter:

    console.table($$('img'), ['src','alt'])

    A lista de elementos na página da Web é exibida no Console, formatada <img> como uma tabela, com cada imagem src e alt atributos como colunas:

    A ferramenta de console, mostrando a função console.table() e uma tabela listando todas as imagens

Obter todos os títulos de página e URLs de âncora

Neste exemplo, você obtém todos os títulos na página da Web que têm um id atributo e gera uma URL que aponta para cada cabeçalho.

  1. Vá para a página da Web que você deseja inspecionar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Copie e cole o seguinte código no Console e pressione Enter:

    let headings = $$('main [id]').filter(el => {
  return el.nodeName.startsWith('H');
}).map(el => {
  return `${el.innerText}: ${document.location.href}#${el.id}\n`;
});
console.log(headings.join("\n"));

    O resultado será o texto que contém conteúdo para cada título de seção, seguido pela URL completa para o título da seção:

    A ferramenta Console, mostrando a lista de todos os títulos na página, juntamente com suas URLs

Copiar informações do console

Nos exemplos anteriores, você gerou listas de elementos e cadeias de caracteres de informações. Pode ser útil copiar as informações geradas do Console e colá-las em outro lugar.

Para copiar o valor retornado de uma expressão executada no Console, use a copy() função de utilitário:

  1. Vá para a página da Web da qual você deseja extrair algumas informações. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Para copiar a lista de todos os URLs de imagem na página, insira o seguinte código no Console e pressione Enter:

    copy($$('img').map(img => img.src).join("\n"));

    A copy() função utility pode pegar qualquer argumento que possa ser convertido em uma cadeia de caracteres e copiá-lo para a área de transferência. Neste exemplo, o argumento é uma cadeia de caracteres que contém todas as URLs de imagem na página, separadas por uma nova linha.

  4. Abra um editor de texto, como o Visual Studio Code, e cole as URLs de imagem copiadas no editor:

    A lista de URLs de imagem em um editor de texto

Limpar o console

Ao executar o código no Console, muitas vezes você acaba com muitas instruções de entrada e resultados de saída que não precisam mais exibir. É possível limpar o Console usando a função utilitária clear() .

Listar os ouvintes de eventos atribuídos a um elemento

Para listar todos os ouvintes de eventos atribuídos a um elemento, use a getEventListeners() função de utilitário:

  1. Vá para a página da Web que você deseja inspecionar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Clique na ferramenta Inspecionar e, na página da Web renderizada, clique em uma das imagens para selecioná-la. A ferramenta Elementos é exibida e o elemento de imagem selecionado é realçado na árvore DOM:

    A ferramenta Elementos, com o elemento de imagem selecionado

  4. Abra a ferramenta Console , digite o seguinte código e pressione Enter:

    getEventListeners($0);

    No trecho de código acima, $0 há um atalho para o elemento atualmente selecionado <img> na ferramenta Elementos . A getEventListeners() função utility retorna um objeto que contém todos os ouvintes de eventos atribuídos à imagem.

  5. Expanda o objeto e, em seguida, expanda o único ouvinte de evento na lista para ver as propriedades do ouvinte. A listener propriedade mostra o nome da função que é chamada quando o evento é disparado (neste exemplo, showImage):

    O objeto expandido, mostrando a propriedade listener

Monitorar eventos disparados na página

Os sites que usam JavaScript geralmente reagem a eventos do usuário que ocorrem no navegador. Pode ser difícil acompanhar todos os eventos acionados pelo navegador. A monitorEvents() função de utilitário permite monitorar os eventos que são acionados na página da Web.

Monitorar todos os eventos em um elemento

Para começar a monitorar eventos:

  1. Vá para a página da Web que você deseja monitorar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Para começar a monitorar os eventos disparados em um elemento, por exemplo, em um dos <img> elementos, insira o seguinte código no Console e pressione Enter:

    monitorEvents(document.querySelector('img'));

    O código acima monitora todos os eventos que são acionados no primeiro <img> elemento da página.

  4. Na página da Web renderizada, passe o mouse sobre a imagem e mova o mouse ou tab até a imagem com o teclado. Eventos como mouseover, mousemovee focus são registrados no Console:

    A ferramenta Console, mostrando a lista de todos os eventos do mouse que são acionados na imagem

Ao monitorar eventos, você obtém logs no Console sempre que um evento é disparado pelo navegador. Isso pode causar muito ruído no console. Você também pode monitorar eventos específicos em um elemento.

Monitorar eventos específicos em um elemento

Para começar a monitorar eventos específicos em um elemento:

  1. Vá para a página da Web que você deseja monitorar. Por exemplo, abra a página de demonstração de interações DOM da ferramenta Console do DevTools em uma nova guia ou janela.

  2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). A ferramenta Console é aberta no DevTools, ao lado da página da Web.

  3. Para começar a monitorar apenas os eventos mousedown, mouseup e click que são acionados em um primeiro <img> elemento da página, insira o seguinte código no Console e pressione Enter:

    monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);

  4. Na página da Web renderizada, clique na primeira imagem. mousedown, mouseupe click os eventos são registrados no Console:

    A ferramenta Console, mostrando a lista de eventos do mouse que são acionados na imagem

Monitorar eventos no Windows

Para receber uma notificação no Console sempre que rolar ou redimensionar a janela:

  1. Cole o seguinte código no Console:

    monitorEvents(window, ['resize', 'scroll']);

  2. Role a página e redimensione a janela do navegador. O Console registra os eventos que são acionados:

    A ferramenta Console, mostrando a lista de eventos de redimensionamento e rolagem

Parar eventos de monitoramento

Ao monitorar eventos no DOM, o Console pode ficar barulhento. Para interromper eventos de monitoramento, use a função de unmonitorEvents() utilitário:

unmonitorEvents(document.querySelector('img'));
unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
unmonitorEvents(window, ['resize', 'scroll']);

Salvar scripts de interação DOM como snippets

Se você inserir o mesmo código de interação DOM repetidamente na Console, considere salvar o código como um snippet e executar o snippet. Os trechos são salvos na ferramenta Fontes e você pode executá-los de lá ou no Menu de Comando. Para saber mais, consulte Executar trechos de JavaScript em qualquer página da Web.

Confira também

  • Last updated on