8.2 - O que é o DOM?
🌐 O que é o DOM?
🌐 O que é o DOM?
📚 DOM significa Document Object Model (em português, Modelo de Objeto do Documento).
🏠 Imagine uma casa...
Pense no seu site como uma casa construída com blocos de LEGO. Cada peça representa uma parte da página:
🏷️ Um título (
<h1>)✉️ Um parágrafo (
<p>)🔘 Um botão (
<button>)🖼️ Uma imagem (
<img>)
O DOM é como o mapa dessa casa que o navegador cria automaticamente para que o JavaScript consiga:
Ver o que tem na casa (ler os elementos 🕵️)
Mudar as coisas de lugar (editar os elementos ✍️)
Criar novos cômodos (adicionar elementos ➕)
Remover o que quiser (tirar elementos ❌)
💡 Em outras palavras...
O DOM é a forma como o JavaScript enxerga a sua página HTML. Ele transforma o código da página em uma estrutura de objetos que podem ser manipulados.
👀 Mas o que é isso na prática?
O DOM é uma estrutura em forma de árvore 🌳 que representa todos os elementos da sua página — como se fossem caixinhas conectadas entre si.
Veja um exemplo:
<html>
<body>
<h1>Olá, mundo!</h1>
<p>Seja bem-vindo à minha página 😊</p>
</body>
</html>Para o navegador, isso vira algo parecido com:
📦 html
└── 📦 body
├── 📦 h1 → "Olá, mundo!"
└── 📦 p → "Seja bem-vindo à minha página 😊"Cada caixinha (ou "nó") é um elemento do DOM que o JavaScript pode encontrar e mudar.
💡 Por que o DOM é importante?
Porque ele é a ponte entre o HTML e o JavaScript. Com o DOM, conseguimos:
Ler o conteúdo da página 🧐
Mudar textos e estilos 🎨
Adicionar ou remover elementos dinamicamente 🧩
Tudo isso sem precisar recarregar a página. Legal, né?
🔄 O DOM é como o cérebro da página
Quando a página é carregada no navegador, o HTML vira uma estrutura DOM — ou seja, uma coleção de objetos que o JavaScript consegue usar para entender e interagir com a página.
Esse processo acontece automaticamente, você não precisa criar o DOM — o navegador já faz isso por você!
🛠️ Um primeiro exemplo
<!DOCTYPE html>
<html>
<body>
<h1 id="titulo">Olá!</h1>
<script>
// Acessa o título e muda seu conteúdo
const titulo = document.getElementById("titulo");
titulo.textContent = "Olá, DOM! 👋";
</script>
</body>
</html>🔍 O que aconteceu?
O navegador transformou o HTML em DOM.
O JavaScript procurou o elemento com
id="titulo".Ele mudou o texto de “Olá!” para “Olá, DOM! 👋”.
Simples assim! 😄
📌 Recapitulando
DOM
Estrutura que representa tudo o que está na página
HTML
A "matéria-prima" da página
JavaScript
A linguagem que usamos para mexer com o DOM
Elementos
Partes da página (títulos, botões, etc.)
Navegador
O programa que transforma o HTML em DOM e exibe a página
✨ Conclusão
O DOM é a chave para deixar suas páginas interativas e dinâmicas. Ele permite que o JavaScript veja e mexa em tudo o que está no HTML.
💬 Pense no DOM como um superpoder que te permite conversar com a página — e ela responde! 💥
Nas próximas seções, você vai aprender como navegar pelo DOM, mudar coisas na tela e até reagir a ações dos usuários!
Last updated