Meu Guia Prático do DOM no JavaScript: Árvore e Eventos

Introdução

JavaScript, DOM, Eventos JS, Front-end, Web Development

Guia Prático do DOM no JavaScript: Entenda a Árvore HTML e os Eventos

Se você já tentou criar interatividade em um site — como abrir um menu ao clicar, alterar um texto na tela ou validar um formulário —, você precisou conversar diretamente com o DOM (Document Object Model).

Compreender a estrutura da árvore DOM e saber como gerenciar eventos é a virada de chave para deixar de criar páginas estáticas e passar a construir aplicações web dinâmicas.

Neste artigo do AqGoEs DeV, vamos descomplicar a estrutura do DOM, mostrar como selecionar elementos de forma performática e dominar o tratamento de eventos com JavaScript puro.

1. O que é o DOM e Como Ele Funciona?

O DOM (Document Object Model) é uma interface de programação para documentos HTML e XML. Ele representa a página web como uma árvore de nós (tree of nodes), onde cada tag, texto ou atributo do HTML vira um objeto manipulável via código.

Quando o navegador carrega o seu HTML, ele constrói essa representação na memória. O JavaScript não altera diretamente o arquivo .html salvo no servidor; ele modifica a árvore DOM renderizada no navegador em tempo real.

[window]
                  |
              [document]
                  |
               [<html>]
             /          \
        [<head>]       [<body>]
           |           /      \
        [<title>]   [<h1>]   [<button>]

2. Selecionando Elementos no DOM

Para manipular qualquer elemento na tela, o primeiro passo é capturar a referência dele usando métodos nativos do objeto document.

Métodos Modernos de Seleção

Hoje em dia, a recomendação padrão é dar preferência aos métodos que utilizam a sintaxe de seletores CSS:

• document.querySelector('seletor'): Retorna o primeiro elemento que coincide com o seletor CSS informado.
• document.querySelectorAll('seletor'): Retorna uma lista de nós (NodeList) com todos os elementos que coincidem com o seletor.

// Selecionando um elemento por ID ou classe usando seletores CSS
const titulo = document.querySelector('#titulo-principal');
const botoes = document.querySelectorAll('.btn-acao');

// Alterando conteúdo e estilos dinamicamente
titulo.textContent = 'Novo Título via JavaScript!';
titulo.style.color = '#6c63ff';

3. Entendendo os Eventos no DOM

Eventos são ações ou acontecimentos disparados no navegador — como um clique do mouse, o pressionamento de uma tecla, o envio de um formulário ou o término do carregamento da página.

A forma mais recomendada, segura e flexível de escutar esses eventos é através do método addEventListener().

A Sintaxe do addEventListener

O método recebe três parâmetros principais: o nome do evento, a função de callback que será executada quando o evento ocorrer e (opcionalmente) um objeto de configurações.

const botao = document.querySelector('#btn-incremementar');
let contador = 0;

botao.addEventListener('click', (event) => {
  contador++;
  console.log(`Botão clicado ${contador} vezes.`);
  console.log('Target do evento:', event.target);
});

4. Principais Tipos de Eventos no Dia a Dia

Confira na tabela abaixo os eventos mais utilizados no desenvolvimento front-end e em quais cenários aplicá-los:

Categoria	Nome do Evento	Quando é disparado?
Mouse	click	O usuário clica sobre o elemento.
Mouse	mouseenter / mouseleave	O cursor do mouse entra ou sai da área do elemento.
Teclado	keydown / keyup	Uma tecla é pressionada ou solta no teclado.
Formulário	submit	O formulário é enviado (ótimo para interceptar e validar dados).
Janela / DOM	DOMContentLoaded	O HTML foi totalmente carregado e a árvore DOM está pronta.

// Exemplo: Interceptando o envio de um formulário
const formulario = document.querySelector('#form-contato');

formulario.addEventListener('submit', (event) => {
  // Impede o recarregamento automático da página
  event.preventDefault(); 
  
  console.log('Formulário enviado com sucesso via JS!');
});

Destaques de Boas Práticas

💡 Dica de Ouro: Sempre utilize event.preventDefault() ao manipular formulários nativos com JavaScript. Isso impede a página de recarregar e permite tratar os dados via Fetch API ou AJAX antes do envio final.

Conclusão

Entender a árvore do DOM e dominar o funcionamento dos eventos com addEventListener é a fundação para qualquer desenvolvedor que deseja construir interfaces reativas e modernas sem depender de bibliotecas externas.

Com essa base, você está pronto para avançar para a manipulação avançada do DOM, delegação de eventos e consumo de APIs assíncronas!

Você costuma usar querySelector para tudo ou ainda utiliza métodos legados como getElementById? Comente abaixo como é o seu fluxo no dia a dia!