DOM e Eventos

DOM (Document Object Model)

O DOM é a representação em árvore do HTML que o JavaScript pode manipular.

Seleção de Elementos

// Métodos modernos (preferir)
const header = document.querySelector('header');
const primeiroCard = document.querySelector('.card');
const todosCards = document.querySelectorAll('.card');
const formulario = document.querySelector('#form-cadastro');

// Métodos clássicos
const byId = document.getElementById('app');
const byClass = document.getElementsByClassName('card');
const byTag = document.getElementsByTagName('div');
const byName = document.getElementsByName('email');

Manipulação de Conteúdo

// innerHTML (renderiza HTML)
const div = document.querySelector('#app');
div.innerHTML = '<h1>Título</h1><p>Parágrafo.</p>';

// textContent (texto puro, seguro)
div.textContent = '<h1>Título</h1>'; // mostra literal
console.log(div.textContent);

// Criar elementos
const paragrafo = document.createElement('p');
paragrafo.textContent = 'Novo parágrafo';
paragrafo.classList.add('texto', 'destaque');
div.appendChild(paragrafo);

// Inserir em posições específicas
const item = document.createElement('li');
item.textContent = 'Item novo';
const lista = document.querySelector('ul');
lista.insertBefore(item, lista.firstChild);

// appendChild vs append
div.append('texto', document.createElement('span')); // mais flexível
div.appendChild(document.createElement('span')); // só Node

classList e dataset

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

// classList
card.classList.add('ativo', 'destaque');
card.classList.remove('inativo');
card.classList.toggle('expandido');
card.classList.replace('old', 'new');
console.log(card.classList.contains('ativo')); // true

// dataset (data-* attributes)
// <div data-id="123" data-tipo="usuario" data-cor-preferida="azul">
console.log(card.dataset.id);            // '123'
console.log(card.dataset.tipo);          // 'usuario'
console.log(card.dataset.corPreferida);  // 'azul' (camelCase!)

card.dataset.status = 'ativo'; // adiciona data-status

Eventos

addEventListener

const botao = document.querySelector('button');

// Evento de clique
botao.addEventListener('click', (event) => {
  console.log('Botão clicado!');
  console.log(event.target);    // elemento que disparou
  console.log(event.currentTarget); // elemento que escuta
});

Event Object

document.querySelector('input').addEventListener('keydown', (e) => {
  console.log(e.key);          // tecla pressionada
  console.log(e.code);         // código físico da tecla
  console.log(e.ctrlKey);      // Ctrl pressionado?
  console.log(e.target.value); // valor atual do input
});

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // impede navegação
  console.log('Link clicado, mas não navegou');
});

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log(Object.fromEntries(formData));
});

Delegação de Eventos

// Em vez de adicionar em cada item:
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', () => {});
});

// Delegação: um listener no pai
const lista = document.querySelector('ul');
lista.addEventListener('click', (e) => {
  const item = e.target.closest('li');
  if (!item) return;

  console.log('Item clicado:', item.textContent);
  item.classList.toggle('selecionado');
});

Bubbling e Capturing

<div id="pai">
  <div id="filho">
    <button id="botao">Clique</button>
  </div>
</div>

// Bubbling (padrão: do mais específico ao mais genérico)
document.querySelector('#pai').addEventListener('click', () => {
  console.log('pai (bubbling)');
});
document.querySelector('#filho').addEventListener('click', () => {
  console.log('filho (bubbling)');
});
document.querySelector('#botao').addEventListener('click', (e) => {
  console.log('botao (bubbling)');
  e.stopPropagation(); // interrompe o bubbling
});

// Capturing (terceiro argumento: true)
document.querySelector('#pai').addEventListener('click', () => {
  console.log('pai (capturing)');
}, true);

Lab: Lista de Tarefas

Crie uma to-do list com adicionar/remover tarefas usando manipulação DOM, delegação de eventos e datasets.

# Abra o HTML no navegador
npx live-server --port=5500

<!DOCTYPE html>
<html lang="pt-BR">
<body>
  <div id="app">
    <input type="text" id="input-tarefa" placeholder="Nova tarefa">
    <button id="btn-adicionar">Adicionar</button>
    <ul id="lista-tarefas"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

const input = document.querySelector('#input-tarefa');
const btn = document.querySelector('#btn-adicionar');
const lista = document.querySelector('#lista-tarefas');

function adicionarTarefa() {
  const texto = input.value.trim();
  if (!texto) return;

  const li = document.createElement('li');
  li.innerHTML = `${texto} <button data-acao="remover">&times;</button>`;
  lista.appendChild(li);
  input.value = '';
  input.focus();
}

btn.addEventListener('click', adicionarTarefa);
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') adicionarTarefa();
});

// Delegação para remover
lista.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-acao="remover"]');
  if (!btn) return;
  btn.closest('li').remove();
});

DOM é a ponte entre JS e HTML. Domine seletores, eventos e delegação para construir interfaces interativas e performáticas.