DOM: Document Object Model
A representação em árvore estrutural de um documento HTML que os navegadores usam para renderizar páginas e executar JavaScript.
Conteúdo
Definição
A representação em árvore estrutural de um documento HTML que os navegadores usam para renderizar páginas e executar JavaScript.
O Document Object Model (DOM) é uma API fornecida pelo navegador. Quando um navegador recebe um documento HTML, ele analisa o texto e constrói uma árvore de objetos (nós) representando cada elemento, atributo e pedaço de texto na página.
Por Que Importa
O DOM é a fonte definitiva da verdade para o que o usuário vê. No entanto, atualizar o DOM diretamente via JavaScript é computacionalmente caro. Esse gargalo de desempenho é o motivo pelo qual bibliotecas modernas de UI (como React ou Vue) inventaram o Virtual DOM — uma cópia leve e em memória da árvore usada para calcular o número mínimo de atualizações reais do DOM necessárias.
O DOM Real vs. O DOM Virtual
- DOM Real: A árvore real mantida pelo navegador. Ler ou escrever nela aciona cálculos de layout e repinturas caros.
- DOM Virtual: Um objeto JavaScript que espelha o DOM Real. Os frameworks atualizam o DOM Virtual rapidamente, calculam a “diferença” (diff) e então aplicam apenas os nós alterados ao DOM Real.
Conceitos Relacionados
- Leia o guia completo: O que a Arquitetura Frontend Realmente É
- Veja também: Estratégia de Renderização