Aprenda / JavaScript do zero

FundamentosAula 6 de 1616 min0% da trilha

DOM e eventos

Como o JavaScript enxerga e modifica uma página HTML — antes de qualquer framework fazer isso pra você.

O DOM (Document Object Model) é a representação da página HTML como uma árvore de objetos que o JavaScript consegue ler e modificar. React/Next.js fazem isso por baixo dos panos — mas entender o que está por baixo ajuda a entender o que o framework está poupando você de escrever.

Selecionar um elemento

const titulo = document.querySelector("h1");        // primeiro <h1> encontrado
const botoes = document.querySelectorAll("button");   // TODOS os <button>, como uma lista

Ler e mudar conteúdo

const titulo = document.querySelector("h1");

titulo.textContent;             // lê o texto atual
titulo.textContent = "Novo título";  // muda o texto
titulo.classList.add("destaque");     // adiciona uma classe CSS
titulo.style.color = "blue";           // muda estilo direto (evite em excesso — prefira classe)

Eventos — reagir a uma ação do usuário

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

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

// o objeto do evento carrega informação sobre o que aconteceu
const input = document.querySelector("input");
input.addEventListener("input", (evento) => {
  console.log("Valor atual:", evento.target.value);
});

Criar elemento na hora

const lista = document.querySelector("ul");

const novoItem = document.createElement("li");
novoItem.textContent = "Nova tarefa";
lista.appendChild(novoItem);

Isso — criar elemento, inserir na árvore, atualizar manualmente a cada mudança — é exatamente o trabalho repetitivo que o React resolve com um modelo declarativo (você descreve o resultado final, o React calcula o que mudar no DOM sozinho). Depois desta lição, a trilha de Frontend faz muito mais sentido: agora você sabe o que está sendo abstraído.

Exercício

Escreva o código que: seleciona um botão com id contador, e a cada clique aumenta em 1 um número mostrado dentro dele.

Quiz rápido

O que é o DOM?
O que addEventListener('click', fn) faz?