Aula 8 – Entendendo o DOM e Eventos em JavaScript: Interatividade na Web para Iniciantes
Até agora, você aprendeu como criar páginas com HTML, estilizar com CSS e escrever JavaScript básico. Agora é hora de dar vida à sua página, criando interatividade com DOM e eventos. Essa aula é essencial para quem deseja sair de páginas estáticas e começar a construir experiências interativas reais, como sliders, menus que se abrem, formulários dinâmicos e muito mais.
DESENVOLVIMENTO WEB
Prof. Leonardo Gomes Guidolin
4/15/20252 min ler
📘 O que é o DOM (Document Object Model)?
O DOM é uma representação em árvore de toda a sua página HTML. Cada elemento HTML vira um nó no DOM, que o JavaScript pode acessar e modificar.
Imagine isso como uma estrutura organizada da sua página, onde você pode navegar, encontrar e editar partes dela com código.
<body>
<h1>Olá, mundo!</h1>
<button>Alterar Título</button>
</body>
No DOM, isso vira algo assim:
document
└── html
└── body
├── h1
└── button
Com o JavaScript, podemos navegar por essa árvore e modificar seus elementos em tempo real.
🛠️ Selecionando Elementos HTML com JavaScript
Para manipular qualquer parte da página, primeiro precisamos selecioná-la.
document.getElementById("meuId"); // Seleciona por ID
document.querySelector(".minhaClasse"); // Seleciona por classe ou tag
document.querySelectorAll("p"); // Seleciona todos os <p>
Você pode guardar os elementos em variáveis para facilitar:
const titulo = document.querySelector("h1");
titulo.textContent = "Novo título!";
🧠 O que são Eventos em JavaScript?
Eventos são ações do usuário que o navegador pode detectar, como:
click – quando o usuário clica em um elemento
input – quando o usuário digita algo
mouseover – quando o mouse passa por cima de algo
submit – quando um formulário é enviado
Você usa addEventListener para “escutar” esses eventos:
document.getElementById("meuBotao").addEventListener("click", function() {
alert("Você clicou!");
});
💡 Exemplo 1: Interação com botão
<h2 id="mensagem">Texto original</h2>
<button id="botao">Clique para mudar</button>
<script>
const mensagem = document.getElementById("mensagem");
const botao = document.getElementById("botao");
botao.addEventListener("click", function() {
mensagem.textContent = "Você clicou no botão!";
});
</script>
Esse exemplo muda o texto quando o botão é clicado.
🧪 Exemplo 2: Input ao vivo
<input type="text" id="nome" placeholder="Digite seu nome">
<p>Olá, <span id="resultado">usuário</span>!</p>
<script>
const nomeInput = document.getElementById("nome");
const resultado = document.getElementById("resultado");
nomeInput.addEventListener("input", function() {
resultado.textContent = nomeInput.value || "usuário";
});
</script>
Aqui, o texto muda conforme o usuário digita, criando uma experiência em tempo real.
⚠️ Eventos Comuns em JavaScript
click - Clique em um botão ou elemento
input - Qualquer digitação ou alteração
change - Quando o valor de um campo muda
mouseover - Quando o mouse passa por cima
mouseout - Quando o mouse sai do elemento
submit - Quando um formulário é enviado
keydown - Quando uma tecla é pressionada
Você pode usar esses eventos para criar animações, alertas, validações, menus e muito mais.
✅ Boas Práticas ao Trabalhar com DOM e Eventos
Evite código duplicado: use funções reutilizáveis.
Deixe seu código organizado: separe lógica e estrutura HTML.
Espere o DOM carregar:
document.addEventListener("DOMContentLoaded", function() {
// seu código aqui
});
Use nomes claros para IDs e classes (ex: btnEnviar, campoEmail).
Use funções externas quando possível, ao invés de funções anônimas.