DOM e Eventos

1. O que é o DOM?

Quando o navegador carrega uma página HTML, ele cria uma representação dela em memória chamada DOM (Document Object Model) — uma "árvore" de elementos que o JavaScript pode ler e modificar. É assim que conseguimos criar páginas interativas: sem o DOM, o JavaScript não teria como "enxergar" ou alterar o HTML.

2. Selecionando elementos

document.querySelector("seletor") encontra o primeiro elemento que combina com o seletor CSS informado (o mesmo tipo de seletor usado em arquivos .css):

// HTML: <p id="mensagem">Texto original</p>

const paragrafo = document.querySelector("#mensagem"); // seleciona pelo id
console.log(paragrafo.textContent); // "Texto original"

paragrafo.textContent = "Texto alterado pelo JavaScript!";

3. Experimente: alterando texto e estilo

Abaixo há uma página real dentro de uma "caixa". Edite o JavaScript à esquerda e clique em Executar para ver o resultado na página.

4. Eventos: reagindo a ações do usuário

addEventListener("evento", funcao) registra uma função que será executada quando o evento acontecer (como "click", "input", "submit").

const botao = document.querySelector("#meuBotao");

botao.addEventListener("click", function () {
  console.log("O botão foi clicado!");
});

5. classList: adicionando e removendo classes CSS

Em vez de mudar estilos um a um, é comum alternar uma classe CSS inteira com classList.add, classList.remove ou classList.toggle:

const caixa = document.querySelector("#caixa");

caixa.classList.toggle("destaque"); // adiciona a classe se não tiver, remove se já tiver

Desafio final do módulo

Complete o código para que, ao clicar no botão, o contador exibido aumente 1 a cada clique. (Dica: guarde o valor em uma variável fora da função e atualize o textContent a cada clique.)

Quiz de fixação