Tornando Páginas Interativas

Agora vamos conectar JavaScript ao HTML! É aqui que a mágica acontece.

O que é DOM?

DOM = Document Object Model (Modelo de Objeto do Documento)

É a representação da página HTML como objetos JavaScript. Com o DOM, podemos:

Encontrar elementos
Modificar conteúdo
Alterar estilos
Reagir a eventos

HTML no arquivo → Navegador lê → Cria o DOM → JavaScript manipula

Selecionando elementos

Por ID (mais específico)

html

<h1 id="titulo">Olá!</h1>

javascript

const titulo = document.getElementById("titulo");console.log(titulo); // <h1 id="titulo">Olá!</h1>

Por classe

html

<p class="destaque">Parágrafo 1</p><p class="destaque">Parágrafo 2</p>

javascript

const destaques = document.getElementsByClassName("destaque");// Retorna uma coleção (parecido com array)

querySelector (moderno e recomendado)

javascript

// Por IDconst titulo = document.querySelector("#titulo"); // Por classe (primeiro elemento)const destaque = document.querySelector(".destaque"); // Por tagconst paragrafo = document.querySelector("p"); // Seletor complexoconst item = document.querySelector("nav a.ativo");

querySelectorAll (múltiplos elementos)

javascript

const todosDestaques = document.querySelectorAll(".destaque"); todosDestaques.forEach(el => {    console.log(el.textContent);});

Modificando conteúdo

textContent vs innerHTML

html

<p id="texto">Olá <strong>mundo</strong>!</p>

javascript

const texto = document.querySelector("#texto"); // textContent - só o textoconsole.log(texto.textContent); // "Olá mundo!"texto.textContent = "Novo texto"; // innerHTML - inclui HTMLconsole.log(texto.innerHTML); // "Olá <strong>mundo</strong>!"texto.innerHTML = "Texto <em>em itálico</em>";

Modificando estilos

javascript

const titulo = document.querySelector("#titulo"); // Uma propriedadetitulo.style.color = "blue";titulo.style.fontSize = "32px";titulo.style.backgroundColor = "#f0f0f0"; // Várias de uma vez com cssTexttitulo.style.cssText = "color: red; font-size: 24px;";

Nota: propriedades CSS com hífen viram camelCase:

background-color → backgroundColor
font-size → fontSize

Manipulando classes

javascript

const elemento = document.querySelector(".card"); // Adicionar classeelemento.classList.add("ativo"); // Remover classeelemento.classList.remove("ativo"); // Alternar (toggle)elemento.classList.toggle("ativo"); // Verificar se temelemento.classList.contains("ativo"); // true/false

Eventos

Eventos são ações do usuário: cliques, teclas, mouse, etc.

addEventListener

javascript

const botao = document.querySelector("#meuBotao"); botao.addEventListener("click", function() {    alert("Botão clicado!");});

Com arrow function

javascript

botao.addEventListener("click", () => {    console.log("Clicou!");});

Eventos comuns

Evento	Quando dispara
`click`	Clique do mouse
`dblclick`	Duplo clique
`mouseover`	Mouse entra no elemento
`mouseout`	Mouse sai do elemento
`keydown`	Tecla pressionada
`keyup`	Tecla solta
`submit`	Formulário enviado
`input`	Valor de input muda
`change`	Valor muda (ao sair)
`load`	Página carregou

Exemplo: Alternar tema

html

<button id="btnTema">🌙 Modo Escuro</button>

javascript

const btnTema = document.querySelector("#btnTema");const body = document.body; btnTema.addEventListener("click", () => {    body.classList.toggle("dark-mode");     if (body.classList.contains("dark-mode")) {        btnTema.textContent = "☀️ Modo Claro";    } else {        btnTema.textContent = "🌙 Modo Escuro";    }});

Criando elementos

javascript

// Criar elementoconst novoParagrafo = document.createElement("p");novoParagrafo.textContent = "Parágrafo criado com JS!";novoParagrafo.classList.add("novo"); // Adicionar ao DOMdocument.body.appendChild(novoParagrafo); // Ou em um elemento específicoconst container = document.querySelector(".container");container.appendChild(novoParagrafo);

Removendo elementos

javascript

const elemento = document.querySelector("#paraRemover");elemento.remove();

Formulários

html

<form id="meuForm">    <input type="text" id="nome" placeholder="Seu nome">    <input type="email" id="email" placeholder="Seu email">    <button type="submit">Enviar</button></form><div id="resultado"></div>

javascript

const form = document.querySelector("#meuForm");const resultado = document.querySelector("#resultado"); form.addEventListener("submit", (e) => {    e.preventDefault(); // Impede recarregar a página     const nome = document.querySelector("#nome").value;    const email = document.querySelector("#email").value;     resultado.innerHTML = `        <p>Nome: ${nome}</p>        <p>Email: ${email}</p>    `;     form.reset(); // Limpa o formulário});

Exemplo completo: Lista de tarefas

html

<!DOCTYPE html><html><head>    <title>Lista de Tarefas</title>    <style>        .concluida { text-decoration: line-through; color: gray; }    </style></head><body>    <h1>📝 Minhas Tarefas</h1>    <form id="formTarefa">        <input type="text" id="novaTarefa" placeholder="Nova tarefa..." required>        <button type="submit">Adicionar</button>    </form>    <ul id="listaTarefas"></ul>     <script src="script.js"></script></body></html>

javascript

// script.jsconst form = document.querySelector("#formTarefa");const input = document.querySelector("#novaTarefa");const lista = document.querySelector("#listaTarefas"); form.addEventListener("submit", (e) => {    e.preventDefault();     const texto = input.value.trim();    if (!texto) return;     // Criar item    const li = document.createElement("li");    li.innerHTML = `        <span>${texto}</span>        <button class="concluir">✓</button>        <button class="remover">✕</button>    `;     // Botão concluir    li.querySelector(".concluir").addEventListener("click", () => {        li.querySelector("span").classList.toggle("concluida");    });     // Botão remover    li.querySelector(".remover").addEventListener("click", () => {        li.remove();    });     lista.appendChild(li);    input.value = "";    input.focus();});

Resumo

✅ DOM é a representação do HTML para JavaScript
✅ querySelector para selecionar elementos
✅ .textContent e .innerHTML para modificar
✅ .style e .classList para estilos
✅ addEventListener para reagir a eventos
✅ createElement e appendChild para criar elementos

Na próxima aula, vamos construir seu portfólio completo! 🚀