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).