JavaScript: Introdução ao DOM

Última atualização: 2026-10-13

O DOM é a única ponte entre o JavaScript e as páginas web. Sem o DOM, JS não seria nada mais que uma linguagem de computação pura. Com o DOM, JS pode "ver" páginas, modificar páginas e dar vida a elas.

Métodos DOM relacionados：document.getElementById() document.querySelector() document.createElement() querySelectorAll class

1. A Árvore DOM e o Objeto document

DOM significa Document Object Model (Modelo de Objetos do Documento). Quando um navegador carrega HTML, ele não armazena como texto simples — ele traduz para uma árvore de objetos. Cada tag HTML vira um objeto (chamado de nó), e os relacionamentos de aninhamento entre tags viram relações pai-filho na árvore.

Pense no DOM como uma árvore invertida: no topo está a raiz (document), ramificando-se para baixo em galhos (html, head, body), e mais abaixo em folhas (div, p, span...).

(2) Estrutura da Árvore DOM

A árvore DOM de uma página HTML simples se parece mais ou menos assim:

HTML

document
  └── html
       ├── head
       │    ├── meta
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div
                 └── span

document é o nó raiz da árvore DOM e o ponto de entrada para o JS acessar o DOM
html é o único elemento filho de document (o elemento documento)
head e body são os dois elementos filhos de html
A partir daí, o aninhamento continua camada por camada formando a árvore completa

(3) Tipos de Nós

Existem três tipos principais de nós no DOM:

Tipo de Nó	Descrição	Valor de nodeType
Nó de elemento	Uma tag HTML, ex: `p`, `div`	1
Nó de texto	Conteúdo de texto dentro de uma tag	3
Nó de atributo	Um atributo de tag, ex: `class`, `id`	2 (obsoleto para uso geral)

HTML

<p class="intro">Olá Mundo</p>

Nesta única linha: <p> é um nó de elemento, class="intro" é um nó de atributo, e Olá Mundo é um nó de texto. No desenvolvimento do dia a dia, nós de elemento são com os quais você mais vai trabalhar.

(4) O Objeto document

document é o ponto de entrada para o DOM — o navegador fornece este objeto global automaticamente. Através dele você pode:

Acessar elementos da página: document.getElementById(), document.querySelector()
Criar novos elementos: document.createElement()
Ler e escrever conteúdo da página: document.title, document.body
Ouvir eventos da página: document.addEventListener()

(5) O Que o DOM Faz

O JS em si não consegue "ver" uma página web — ele só consegue calcular. O DOM fornece os "olhos" e as "mãos":

Ler: Obter textos, atributos e estilos da página
Modificar: Alterar conteúdo de texto, valores de atributos e estilos CSS
Adicionar: Criar novos elementos e inseri-los na página
Remover: Remover elementos da página
Ouvir: Responder a cliques, inputs e outras interações do usuário

Sem o DOM, JS e HTML seriam duas coisas completamente separadas. O DOM conecta eles.

❓ Perguntas Frequentes

P O DOM faz parte do JavaScript?

R Não. O DOM é um padrão definido pelo W3C. O JavaScript apenas fornece APIs para interagir com ele. O Node.js não tem DOM porque não é um ambiente de navegador. Confundir DOM e JS é um erro comum de iniciantes.

P Por que existem nós de texto vazios no childNodes?

R Quebras de linha e indentação no HTML são interpretadas como nós de texto no DOM. Por exemplo, o espaço em branco entre duas tags vira um nó de texto (contendo um caractere de nova linha). Se você quer apenas nós de elemento, use children em vez de childNodes.

P Modificar o DOM afeta o desempenho da página?

R Sim. Toda modificação no DOM pode acionar um reflow e repaint do navegador. Manipulação frequente do DOM é um assassino de desempenho. Boa prática: construa todas as suas alterações na memória primeiro, depois escreva no DOM de uma vez.

📖 Resumo

O DOM é uma representação em árvore do HTML; cada tag é um nó DOM
document é o ponto de entrada do DOM; document.getElementById() encontra elementos por ID
document.querySelector() usa seletores CSS para o primeiro match; querySelectorAll para todos
Tipos de nó: nós de elemento (tags HTML), nós de texto (conteúdo), nós de atributo (atributos de tag)
Operações DOM principais: encontrar nós, ler atributos, modificar conteúdo, adicionar/remover filhos

📝 Exercícios

Abra as DevTools do navegador (F12), digite console.dir(document) no Console, e explore as propriedades e métodos do objeto document. Liste 5 que você reconhece ou acha interessante.
Escreva código que obtenha o elemento body da página atual, imprima seu childElementCount (número de elementos filhos), depois use children para percorrer todos os elementos filhos e imprimir o nome da tag de cada um.
Explique a diferença entre "nós de elemento" e "nós de texto". Dado <div>Olá <b>Mundo</b></div>, desenhe sua estrutura de árvore de nós e rotule o tipo de cada nó.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós