O que é o DOM? O mapa da sua página web

Quando você escreve HTML, está montando a estrutura da página: títulos, parágrafos, botões, imagens e por aí vai.
Mas como o JavaScript consegue “enxergar” tudo isso para mudar textos, cores ou reagir a cliques?

A resposta é: DOM.

DOM em uma frase

DOM (Document Object Model) é a forma como o navegador representa sua página para que o JavaScript consiga ler e modificar.

Analogia do mapa

Pense no seu HTML como uma cidade construída.
O DOM é o mapa dessa cidade, mostrando onde cada “casa” (elemento) está.

Com esse mapa, o JavaScript consegue:

• encontrar elementos
• alterar conteúdo
• mudar estilos
• criar novos elementos
• remover elementos
• reagir a eventos (como cliques)

Estrutura em árvore (tree)

O DOM organiza os elementos em formato de árvore.

Exemplo de HTML:

<body>
  <h1>Título</h1>
  <p>Parágrafo</p>
</body>

No DOM, isso vira algo como:

• document
  • html
    • body
      • h1
      • p

Ou seja: existem relações de “pai” e “filho” entre elementos.

Tudo vira objeto manipulável

No DOM, cada elemento HTML vira um objeto que o JavaScript pode manipular.

Exemplo:

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

const titulo = document.getElementById("titulo");
titulo.textContent = "Olá, DOM!";

Aqui o JavaScript:

1. encontra o elemento no DOM
2. altera o texto dele

O papel do document

document é o ponto de entrada do DOM no JavaScript.
É como a “porta principal” para acessar o mapa da página.

Exemplos comuns:

• document.getElementById(...)
• document.querySelector(...)
• document.querySelectorAll(...)

HTML x DOM (diferença prática)

• HTML: é o código-fonte da estrutura.
• DOM: é a representação viva dessa estrutura no navegador.

Quando o JavaScript altera algo na página, ele altera o DOM.
E aí a tela atualiza para o usuário.

Por que isso é tão importante?

Sem DOM, sua página seria quase estática.
Com DOM + JavaScript, você cria páginas interativas:

• botão que muda texto
• tema claro/escuro
• validação de formulário
• lista dinâmica de tarefas
• menus que abrem e fecham

Resumo da lição

• DOM é o “mapa” da página que o navegador cria a partir do HTML.
• Esse mapa é em forma de árvore de elementos.
• JavaScript usa o DOM para acessar e modificar a página em tempo real.
• document é o objeto principal para começar a manipulação.
• Entender DOM é a base para toda interatividade em JavaScript no navegador.