🚀 Capítulo 01: O que é o DOM?
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que é o DOM (Document Object Model), como o navegador enxerga a sua página HTML e como o JavaScript pode ser usado para alterar essa estrutura.
🏢 O Cenário Prático (Seu Desafio)
Você acaba de ser escalado para a equipe de engenharia da Aliança Rebelde! O painel de controle principal da nave está estático e sem vida. Seu desafio é entender a estrutura desse painel (o DOM) para que possamos usar o JavaScript para fazê-lo piscar e reagir aos comandos!
🧠 Fundamentos: A Teoria Traduzida
O que é o DOM?
DOM significa Document Object Model (Modelo de Objeto do Documento). Quando o navegador lê o seu arquivo HTML, ele cria uma árvore cheia de objetos.
Pense no HTML como a planta de uma nave:
- A tag
<html>é a nave inteira. - A tag
<body>é o interior da nave. - As tags
<h1>,<p>,<div>são as salas e painéis.
O JavaScript consegue entrar nessa árvore e mudar qualquer coisa: mudar textos, cores, criar novas salas ou destruir as antigas!
📖 Exemplo Guiado: A Árvore do DOM
Imagine este HTML simples:
<!DOCTYPE html>
<html>
<head>
<title>Painel</title>
</head>
<body>
<h1 id="titulo">Status: Ok</h1>
<p>Bem-vindo, piloto.</p>
</body>
</html>O navegador enxerga isso como uma árvore:
documenthtmlhead→title→ “Painel”bodyh1→ “Status: Ok”p→ “Bem-vindo, piloto.”
Com JavaScript, podemos fazer isso: document.getElementById('titulo').innerText = '🚨 ALERTA!'; e o texto mudará na tela na mesma hora!
🛠️ Prática Obrigatória 1
Crie um arquivo index.html simples com um título <h1> escrito “Sistema Iniciado”.
🛠️ Prática Obrigatória 2
Crie um arquivo script.js, linke-o no seu HTML e use o console.log(document) para ver a árvore do DOM aparecer no console do desenvolvedor (F12).
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No index.html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Teste DOM</title>
</head>
<body>
<h1>Sistema Iniciado</h1>
<script src="script.js"></script>
</body>
</html>No script.js:
console.log(document);