DOM e Eventos

Seleção de elementos, manipulação e listeners

O DOM (Document Object Model) é a representação em árvore da estrutura HTML que o navegador cria. JavaScript pode ler e modificar qualquer nó dessa árvore em tempo real, tornando as páginas interativas. Cada tag HTML é um objeto (Element) com propriedades, métodos e eventos.

A seleção de elementos usa dois métodos principais: getElementById (busca por ID, O(1)) e querySelector (CSS selector, mais flexível: "#id", ".classe", "div > p"). querySelectorAll retorna todos os que batem com o seletor como NodeList.

Eventos são ações do usuário (click, input, keydown, submit) ou do navegador (load, resize, scroll). addEventListener registra um handler que será chamado quando o evento ocorrer. O objeto event passado ao handler contém informações: event.target (elemento que disparou), event.preventDefault() (cancela o comportamento padrão), event.stopPropagation() (para o borbulhamento — event bubbling).

Exemplo.java

// ── Seleção de elementos ─────────────────────────
const btn = document.getElementById("meu-btn");
const form = document.querySelector("form");
const itens = document.querySelectorAll(".item");

// ── Leitura e escrita de conteúdo ─────────────────
const titulo = document.querySelector("h1");
titulo.textContent = "Novo Título"; // só texto (seguro)
titulo.innerHTML = "<strong>Título</strong>"; // parse HTML (cuidado: XSS)

// ── Manipular atributos e estilos ─────────────────
btn.setAttribute("disabled", "");
btn.removeAttribute("disabled");
btn.classList.add("ativo");
btn.classList.toggle("visivel");
btn.style.backgroundColor = "#3dff8f";

// ── Criação dinâmica de elementos ─────────────────
const li = document.createElement("li");
li.textContent = "Novo item";
document.querySelector("ul").appendChild(li);

// ── Eventos ───────────────────────────────────────
btn.addEventListener("click", (event) => {
  event.preventDefault(); // cancela comportamento padrão
  console.log("Clicado em:", event.target);
});

form.addEventListener("submit", (e) => {
  e.preventDefault(); // impede reload da página
  const dados = new FormData(form);
  console.log(dados.get("email"));
});

// ── Event delegation: um listener para vários filhos ─
document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("concluido");
  }
});

💡 Dica pro

Event delegation é mais eficiente do que adicionar um listener em cada elemento filho. Um listener no pai captura eventos de todos os filhos via bubbling. Essencial para listas dinâmicas.

Recompensa+35 XP+exercícios