Manipulação do DOM e Eventos em JavaScript

Olá, querida(o) estudante! No artigo de hoje, vamos explorar a base da interatividade na web e um dos tópicos mais frequentes em provas de desenvolvimento frontend: a manipulação do Document Object Model (DOM) e o tratamento de eventos com JavaScript.

Quando um navegador carrega uma página web, ele transforma o código HTML estático em uma estrutura orientada a objetos mutável. É através do JavaScript que conseguimos ler, criar, modificar e remover elementos visuais em tempo de execução, além de reagir às ações do usuário. Compreender como selecionar nós e gerenciar eventos no lado do cliente é essencial para acertar questões de frontend nas principais bancas.

Neste artigo, veremos como funciona a árvore do DOM, os métodos modernos de seleção, como alterar conteúdos e atributos, e como lidar com escuta de eventos. Ao final, analisaremos três questões recentes com comentários diretos e pontuais, alternativa por alternativa.

O que é o DOM (Document Object Model)?

O DOM (Modelo de Objeto de Documento) é uma interface de programação para documentos HTML e XML. Ele representa a estrutura da página web como uma árvore hierárquica de nós (nodes), onde cada tag, atributo e texto torna-se um objeto acessível via programação.

A manipulação do DOM ocorre exclusivamente no navegador (client-side) após o documento ter sido baixado e interpretado. O servidor web apenas entrega os arquivos originais; cabe ao motor JavaScript do navegador executar as modificações visuais de forma dinâmica.

Seleção de Elementos: Métodos Tradicionais e Modernos

Para interagir com qualquer elemento visual, o primeiro passo é localizá-lo na árvore do DOM. Existem métodos clássicos e métodos baseados em seletores CSS:

Alteração de Conteúdo e Criação Dinâmica de Nós

Após selecionar um elemento, o JavaScript permite alterar seu conteúdo textual, suas tags internas e suas classes de estilo:

• textContent: Lê ou define o texto puro contido no nó, ignorando formatações HTML (mais seguro contra injeção de código).
• innerHTML: Lê ou insere marcações HTML completas, interpretando novas tags passadas como texto.
• classList: Fornece métodos como .add(), .remove() e .toggle() para manipular classes CSS de forma limpa.
• createElement(tag) e appendChild(no): Permitem instanciar novos elementos do zero na memória e adicioná-los visualmente à árvore do documento.

Gerenciamento de Eventos com addEventListener

Eventos são ações que ocorrem no navegador — como cliques de mouse, digitação no teclado ou submissão de formulários. O método padrão para interceptar e tratar essas ações é o addEventListener(), que vincula uma função de retorno (callback) a um evento específico do elemento sem sobrescrever ouvintes anteriores:

JavaScript

const botao = document.querySelector('#meuBotao');

botao.addEventListener('click', () => {

  console.log('Botão clicado pelo usuário!');

});

Questões Comentadas

1) Ano: 2023 Banca: FAU Órgão: UNIOESTE Prova: Analista de Informática – Desenvolvimento de Sistemas

Qual é a diferença entre o método querySelector() e o método querySelectorAll() em JavaScript?

A) QuerySelector() retorna o primeiro elemento que corresponde ao seletor, enquanto querySelectorAll() retorna uma lista de todos os elementos correspondentes.

B) QuerySelector() retorna uma lista de todos os elementos correspondentes, enquanto querySelectorAll() retorna o primeiro elemento que corresponde ao seletor.

C) QuerySelector() e querySelectorAll() são equivalentes e retornam a mesma coisa.

D) QuerySelector() retorna apenas elementos com IDs, enquanto querySelectorAll() retorna todos os elementos correspondentes.

E) QuerySelector() e querySelectorAll() são métodos inexistentes em JavaScript.

Gabarito: Letra A

Comentário:

• A) Correta. O querySelector retorna exclusivamente o primeiro nó coincidente com o seletor CSS, enquanto o querySelectorAll retorna uma lista (NodeList) com todos os nós encontrados.
• B) Incorreta. Inverte o comportamento real dos dois métodos.
• C) Incorreta. Não são equivalentes; um retorna um único elemento e o outro retorna uma coleção de nós.
• D) Incorreta. O querySelector aceita qualquer seletor CSS válido (classes, tags, atributos), e não apenas IDs.
• E) Incorreta. Ambos são métodos nativos padronizados da interface Document no JavaScript.

2) Ano: 2025 Banca: UNIVALI Órgão: Prefeitura de Luiz Alves – SC Prova: Técnico em Manutenção e Suporte de Informática

O JavaScript é uma linguagem de script de alto nível, interpretada, que roda no navegador do cliente, sendo essencial para criar páginas web dinâmicas e interativas. Sobre a manipulação do DOM com JavaScript, analise as afirmativas a seguir:

I. O JavaScript pode selecionar elementos da página HTML, por exemplo, usando o método document.getElementById(‘id_do_elemento’).

II. Após selecionar um elemento, o JavaScript pode alterar seu conteúdo, como modificar o texto interno de um parágrafo usando a propriedade innerHTML ou textContent.

III. A manipulação do DOM pelo JavaScript ocorre exclusivamente no servidor web antes que a página seja enviada ao cliente, não sendo possível alterar a página dinamicamente no navegador.

Está correto o que se afirma em:

A) II e III apenas.

B) I e III apenas.

C) I e II apenas.

D) I, II e III.

Gabarito: Letra C

Comentário:

• I. Correto. getElementById é um método nativo para capturar nós através do atributo identificador id.
• II. Correto. innerHTML e textContent são as propriedades utilizadas para leitura e escrita do conteúdo de elementos.
• III. Incorreto. A manipulação da árvore do DOM ocorre no lado do cliente (client-side), permitindo alterações dinâmicas e em tempo real diretamente no navegador.

3) Ano: 2025 Banca: IF Sul Rio-Grandense Órgão: IF Sul Rio-Grandense Prova: Professor EBTT – Informação e Comunicação

Considere o seguinte código JavaScript, que cria dinamicamente uma modal no DOM ao clicar em qualquer botão com a classe .openModal:

document.querySelectorAll('.openModal') 

  .forEach(btn => btn.addEventListener('click', () => { 

    const modal = document.createElement('div'); 

    modal.classList.add('modal'); 

    modal.innerHTML = `<div class="modal-content"> 

      <h2>Hello World!</h2> 

      <p>This is my website</p> 

      <button id="closeModal">Fechar</button> 

    </div>`; 

    modal.querySelector('#closeModal') 

      .addEventListener('click', () => modal.remove()); 

    document.body.appendChild(modal); 

  }));

Com base no código acima, analise as afirmações sobre o comportamento esperado e identifique a INCORRETA:

A) Sempre que um botão com a classe .openModal for clicado, uma nova modal será criada e adicionada ao DOM, e o botão “Fechar” funcionará corretamente, removendo a respectiva modal.

B) Mesmo após a primeira modal ser fechada, a próxima modal aberta funcionará corretamente, pois o evento de “Fechar” é vinculado a cada nova instância do botão #closeModal dentro da modal.

C) O botão “Fechar” da modal remove-a do DOM sem deixar vestígios de eventos ou elementos relacionados à modal removida, mantendo o DOM limpo após o fechamento.

D) Se o usuário clicar múltiplas vezes em um botão com a classe .openModal, apenas a última instância da modal permanecerá no DOM.

Gabarito: Letra D

Comentário:

• A) Correta. A cada clique no botão .openModal, a função executa document.createElement(‘div’), monta a estrutura interna e insere o elemento no final da página com appendChild(modal). Como o botão interno de fechar recebe a função modal.remove(), a modal criada é excluída corretamente quando o usuário clica em “Fechar”.
• B) Correta. O evento de clique é registrado diretamente no botão #closeModal dentro do escopo de cada modal criada (modal.querySelector(‘#closeModal’)). Isso garante que cada nova janela aberta tenha seu próprio ouvinte de clique funcionando de forma independente, mesmo após janelas anteriores terem sido fechadas.
• C) Correta. O método nativo .remove() exclui a tag da modal e todos os seus elementos filhos da árvore do DOM, limpando a estrutura da página após o fechamento.
• D) Incorreta (Gabarito da questão). O código não verifica se já existe uma modal aberta nem limpa as anteriores antes de adicionar uma nova. Como cada clique executa document.body.appendChild(modal), se o usuário clicar várias vezes, várias modais serão inseridas e ficarão acumuladas no DOM ao mesmo tempo.

Conclusão

A manipulação direta do DOM e a gestão de eventos formam o núcleo de qualquer interface interativa na web. Dominar a diferença entre os métodos de seleção, compreender as formas de inserção de conteúdo e identificar o comportamento dos nós adicionados dinamicamente garante os pontos necessários em qualquer exame de desenvolvimento frontend.

Bons estudos e até nosso próximo artigo!

Para acompanhar mais conteúdos de TI, siga minha página no Instagram: @dev.anajbsouza

Referências

• MOZILLA DEVELOPER NETWORK (MDN). Introduction to the DOM. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
• MOZILLA DEVELOPER NETWORK (MDN). EventTarget: addEventListener() method. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
• FLANAGAN, D. JavaScript: O Guia Definitivo. O’Reilly / Novatec, 2021.