10 DOM e Eventos

DOM (Document Object Model) é a estrutura da página HTML que o JavaScript consegue manipular.

Com DOM e eventos, você cria interfaces interativas.

10.1 Selecionando elementos

<h2 id="titulo">Loja Técnica</h2>
<button id="botao">Clique</button>

const titulo = document.getElementById("titulo");
const botao = document.getElementById("botao");

titulo.textContent = "Sistema Escolar";

Outros seletores:

const primeiroCard = document.querySelector(".card");
const todosOsCards = document.querySelectorAll(".card");

10.2 Alterando estilos e classes

const card = document.querySelector(".card");

card.classList.add("ativo");
card.classList.toggle("destaque");
card.style.border = "2px solid #1f6feb";

10.3 Eventos

botao.addEventListener("click", () => {
  alert("Botão clicado!");
});

Eventos comuns:

click
input
change
submit
keydown

10.4 Formulários

<form id="formAluno">
  <input id="nome" placeholder="Nome" />
  <button type="submit">Salvar</button>
</form>

const form = document.getElementById("formAluno");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const nome = document.getElementById("nome").value.trim();

  if (!nome) {
    alert("Informe o nome");
    return;
  }

  console.log(`Aluno cadastrado: ${nome}`);
});

10.5 Criando elementos dinamicamente

<ul id="lista"></ul>

const lista = document.getElementById("lista");
const itens = ["Caderno", "Caneta", "Lápis"];

for (const item of itens) {
  const li = document.createElement("li");
  li.textContent = item;
  lista.appendChild(li);
}

10.6 Delegação de eventos

Útil quando itens são criados dinamicamente.

lista.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("feito");
  }
});

10.7 Exemplo integrado: contador

<p id="valor">0</p>
<button id="menos">-</button>
<button id="mais">+</button>

const campo = document.getElementById("valor");
const botaoMenos = document.getElementById("menos");
const botaoMais = document.getElementById("mais");

let contador = 0;

function renderizar() {
  campo.textContent = contador;
}

botaoMenos.addEventListener("click", () => {
  contador--;
  renderizar();
});

botaoMais.addEventListener("click", () => {
  contador++;
  renderizar();
});

10.8 Exercícios

Crie uma página com botão que altera a cor de fundo.
Faça um contador com botões de aumentar e diminuir.
Valide um formulário para impedir envio com campo vazio.
Crie uma lista de tarefas com botão de remover item.
Desafio: implemente filtro de tarefas (todas, pendentes, concluídas).