DOM: O Documento Vivo

O que vais aprender nesta aula:

  • O que é o DOM (Document Object Model)
  • Como o navegador vê a página (Árvore de Elementos)
  • Selecionar elementos: getElementById e querySelector

🧠 Teoria (com Analogia e Contexto Real)

Até agora, o nosso código vivia na "Consola" (invisível). Agora vamos mexer na página que o utilizador vê!

🌳 Analogia da Árvore Genealógica

Imagina que o HTML é uma árvore:

  • O document é o "Adão" (raiz de tudo).
  • O body é filho do document.
  • Os h1, p, div são os filhos, netos e bisnetos.

O DOM é a ferramenta que nos deixa "agarrar" qualquer membro desta família pelo braço e mudá-lo.

💻 Prática (Orientada e Progressiva)

Para mexer em algo, primeiro temos de o SELECIONAR (encontrar).

Método 1: `getElementById` (O Clássico)

Funciona como o número de CC. É único. Se tens um ID, este é o melhor método.

// HTML: <h1 id="titulo">Olá</h1>

const meuTitulo = document.getElementById("titulo");
console.log(meuTitulo); // Mostra o elemento H1 inteiro

Método 2: `querySelector` (O Moderno "Canivete Suíço")

Seleciona como no CSS. Podes apanhar IDs (#), Classes (.) ou Tags (p).

// Selecionar pelo ID
const titulo = document.querySelector("#titulo");

// Selecionar pela Classe (apanha só o PRIMEIRO que encontrar)
const botao = document.querySelector(".btn-submit");

// Selecionar pela Tag
const paragrafo = document.querySelector("p");

🧪 Área de Testes

Este quadrado abaixo tem o ID caixa-magica.

Eu sou uma caixa.

✅ Verificação de Conhecimento

1. O que significa DOM?

Document Online Mode
Document Object Model
Dados Organizados Manualmente

2. Se eu tiver `<div class="teste">`, qual selector uso no `querySelector`?

querySelector("teste")
querySelector("#teste")
querySelector(".teste")

🏠