DOM em JavaScript: Entendendo Como a Página se Torna um Objeto Vivo

12 minVanderlei José Alamino

Como o JavaScript muda o que você vê numa página? Como um clique em um botão faz novo conteúdo aparecer, ou como um toggle de "modo escuro" transforma a página inteira instantaneamente?

snippetJavaScript

// O DOM permite fazer coisas assim:document.querySelector('h1').textContent = 'Olá, DOM!';document.body.style.backgroundColor = 'lightblue';document.getElementById('btn').addEventListener('click', handleClick);

Mas como o JavaScript "conversa" com o HTML? A resposta está no DOM (Document Object Model) — a ponte entre seu markup e seu código JavaScript.

Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você vai aprender:

O que é o DOM e como o navegador o constrói a partir do HTML
Como selecionar, ler e modificar elementos da página
Como criar, remover e navegar entre nós da árvore
Por que o DOM é diferente do HTML que você escreveu
Por que frameworks como React existem para simplificar essa manipulação

Pré-requisitos: Familiaridade básica com HTML e CSS. Se você já entende o event loop, verá como eventos DOM se encaixam na coordenação assíncrona do JavaScript.

dom-javascript-pagina-objeto-vivo.meta.jsonjson

// metadados do artigo

{
  "tag": "web platform",
  "readTime": "12 min",
  "author": "Vanderlei José Alamino",
  "source": "33jsconcepts.com",
  "series": "33 Conceitos JS",
  "part": {
    "current": 14,
    "total": 38
  }
}

abrir fonte original

dom-javascript-pagina-objeto-vivo.mdmarkdown

Fonte de referência

Conteúdo adaptado a partir do guia original em inglês.

33jsconcepts.com

seção

O que é o DOM

O DOM (Document Object Model — Modelo de Objeto de Documento) é uma interface de programação que representa documentos HTML como uma árvore de objetos. Conforme especificado no WHATWG DOM Living Standard, quando o navegador carrega uma página, ele analisa o HTML e cria o DOM — uma representação estruturada e viva que o JavaScript pode ler e modificar.

Cada elemento, atributo e pedaço de texto se torna um nó nessa árvore. Em resumo: o DOM é como o JavaScript "enxerga" e altera uma página web.

snippetJavaScript

// O DOM transforma HTML em objetos JavaScript manipuláveisconst titulo = document.querySelector('h1');titulo.textContent = 'Novo título';titulo.style.color = 'blue';

Quando você altera o DOM com JavaScript, a página atualiza imediatamente — sem recarregar. É isso que torna sites interativos possíveis.

seção

Analogia: A Planta da Casa

Pense no HTML como a planta arquitetônica de uma casa. É o projeto no papel: define onde ficam as paredes, portas e janelas, mas não é a casa em si.

snippettext

┌─────────────────────────────────────────────────────────────────────┐│  HTML = PLANTA DA CASA (arquivo estático)                           ││                                                                     ││  <!DOCTYPE html>                                                    ││  <html>                                                             ││    <head><title>Minha Casa</title></head>                           ││    <body>                                                           ││      <header>Entrada</header>                                       ││      <main>Sala de estar</main>                                     ││      <footer>Garagem</footer>                                       ││    </body>                                                          ││  </html>                                                            ││                                                                     ││  📄 Arquivo no disco — não muda sozinho                             │└─────────────────────────────────────────────────────────────────────┘┌─────────────────────────────────────────────────────────────────────┐│  DOM = CASA CONSTRUÍDA (objeto vivo na memória)                     ││                                                                     ││  document                                                           ││    └── <html>                                                       ││          ├── <head> → <title> "Minha Casa"                          ││          └── <body>                                                 ││                ├── <header> "Entrada"                               ││                ├── <main> "Sala de estar"                           ││                └── <footer> "Garagem"                               ││                                                                     ││  🏠 Objeto na memória — JavaScript pode reformar em tempo real      │└─────────────────────────────────────────────────────────────────────┘

O navegador é o construtor: lê a planta (HTML), corrige erros, adiciona partes que faltam e ergue a casa (DOM). O JavaScript é o morador com poder de reforma: pode pintar paredes, mover móveis ou até construir novos cômodos — tudo sem voltar ao papel original.

A planta (HTML) permanece igual no arquivo. A casa (DOM) pode mudar a cada interação do usuário.

seção

Como o Navegador Cria o DOM

Quando você digita uma URL e pressiona Enter, o navegador passa por etapas para transformar bytes em uma página interativa:

1. Download do HTML

O navegador baixa o arquivo HTML do servidor.

2. Parsing (análise)

O motor de parsing lê o HTML byte a byte, tokeniza e constrói a árvore DOM nó por nó. Segundo o algoritmo de parsing da especificação HTML, o navegador corrige erros automaticamente — tags faltando, fechamentos incorretos, aninhamento inválido.

snippethtml

<!-- O que você escreveu (HTML inválido) --><!DOCTYPE html><html>Olá, Mundo!</html><!-- O que o navegador cria (DOM corrigido) --><!DOCTYPE html><html>  <head></head>  <body>Olá, Mundo!</body></html>

3. Construção da árvore

Cada tag vira um elemento, cada texto vira um nó de texto, cada comentário vira um nó de comentário.

4. Execução de scripts

Scripts