Entendendo o Document Object Model (DOM) - Aprender JavaScript

O Document Object Model (DOM) é a base do desenvolvimento web, atuando como uma ponte entre o conteúdo de uma página (HTML), sua apresentação (CSS) e seu comportamento interativo (JavaScript). Este artigo aprofunda a natureza do DOM, sua relação com HTML e CSS, e como os navegadores o constroem para renderizar uma página web.

O que é o DOM?

O DOM é uma interface de programação implementada pelos navegadores que permite que scripts leiam, manipulem e modifiquem o conteúdo, a estrutura e o estilo de um site de forma dinâmica. Ele representa uma página web como uma árvore de objetos, onde cada nó corresponde a uma parte do documento — um elemento, um atributo, um trecho de texto ou um comentário. O DOM não faz parte das especificações de HTML ou JavaScript; ele é construído pelo navegador de acordo com a especificação DOM padronizada pela WHATWG e pelo World Wide Web Consortium (W3C).

Uma forma útil de pensar sobre isso: o arquivo HTML é a receita, e o DOM é o prato pronto que o navegador realmente serve. Uma vez concluído o parsing, o texto HTML deixa de existir — seu JavaScript sempre interage apenas com o DOM. É por isso que document.body.innerHTML = '...' altera a página, mas nunca reescreve o arquivo .html original no disco.

Como o HTML se mapeia em uma árvore DOM

Considere este pequeno trecho de marcação:

<body>
  <h1>Hello</h1>
  <p>A <em>short</em> note.</p>
</body>

O navegador transforma isso em uma árvore onde cada tag se torna um nó de elemento e cada sequência de texto se torna um nó de texto:

HTMLBodyElement (body)
├── HTMLHeadingElement (h1)
│   └── #text "Hello"
└── HTMLParagraphElement (p)
    ├── #text "A "
    ├── HTMLElement (em)
    │   └── #text "short"
    └── #text " note."

Observe que os espaços em branco e o texto entre as tags também se tornam nós reais — uma surpresa comum quando se espera que firstChild seja o <h1>, mas se obtém um nó de texto. Para aprender como o navegador categoriza cada tipo de nó, veja Entendendo os Nós do DOM e Propriedades de nó: tipo, tag e conteúdo.

Explore Nossas Seções de DOM em JavaScript

Este capítulo é o ponto de entrada para uma série completa sobre como trabalhar com o DOM em JavaScript. Cada tópico abaixo tem um link para um capítulo dedicado:

Entendendo os Nós do DOM — os blocos fundamentais de construção do DOM e como eles são estruturados.
Selecionando Elementos do DOM — métodos para encontrar elementos, incluindo getElement* e querySelector.
Manipulando o DOM — adicionar, remover e alterar elementos para construir páginas dinâmicas.
Trabalhando com Estilos no DOM — aplicar e ler estilos CSS por meio de JavaScript.
Tratamento de Eventos no DOM — responder a interações do usuário de forma eficiente.
Percorrendo o DOM — navegar pela árvore para alcançar nós pai, filho e irmão.
Técnicas de Manipulação do DOM — DocumentFragments, clonagem de nós e agrupamento de atualizações.
Trabalhando com Formulários — leitura de entradas, validação e tratamento de envios.
Técnicas Avançadas de DOM — manipulações complexas e otimizações.
Bibliotecas de Manipulação do DOM — bibliotecas como jQuery que simplificam tarefas comuns.
Compatibilidade do DOM com Navegadores — manter manipulações consistentes entre navegadores.
Considerações de Acessibilidade no DOM — melhores práticas para páginas acessíveis.
Depuração e Ferramentas — inspecionar e solucionar problemas no DOM.
Otimização de Desempenho — estratégias para atualizações rápidas e fluidas.
Elementos Interativos e Widgets — construir componentes interativos envolventes.

Relação entre HTML, CSS e o DOM

HTML, CSS e o DOM interagem intimamente para entregar uma página web:

HTML fornece a estrutura básica das páginas, que é então representada como a árvore DOM.
CSS é usado para controlar o layout e a aparência dos elementos dentro do DOM. O navegador analisa os estilos em um CSSOM (CSS Object Model), que é combinado com o DOM para construir a árvore de renderização. Quando os estilos mudam, o navegador recalcula os estilos computados e atualiza a árvore de renderização de acordo, refletindo as alterações de estilo.
JavaScript usa o DOM para interagir e modificar o HTML e o CSS, permitindo alterações dinâmicas no conteúdo e no estilo da página.

O processo é simbiótico: HTML é transformado em DOM, CSS estiliza o DOM, e JavaScript manipula o DOM, atualizando o que o usuário vê na tela.

Como o Navegador Constrói o DOM

O processo de construção do DOM é uma parte crítica de como os navegadores web interpretam o HTML e o CSS de uma página e os transformam em uma exibição visível e interativa. Veja como esse processo normalmente ocorre:

Parsing do HTML: O navegador analisa o código-fonte HTML de uma página web. Durante esse processo de parsing, o navegador identifica elementos como tags, atributos e seu conteúdo textual. Cada elemento, atributo e trecho de texto se torna parte da árvore DOM como um nó.
Construção da Árvore DOM: À medida que o HTML é analisado, o navegador constrói uma árvore DOM onde cada nó representa um objeto no documento. Essa estrutura de árvore espelha a estrutura HTML, mas permite que linguagens de programação como JavaScript interajam com os elementos da página de forma programática.
Construção da Árvore de Renderização: Paralelamente à construção da árvore DOM, o navegador constrói uma árvore de renderização, que combina elementos do DOM com seus estilos CSS correspondentes. Ao contrário da árvore DOM, a árvore de renderização não inclui elementos não visuais como tags <script> ou elementos com display: none;.
Layout: Uma vez que a árvore de renderização está construída, o navegador calcula o layout, determinando a posição e o tamanho exatos de cada objeto na tela.
Pintura: A etapa final envolve a pintura da árvore de renderização na tela. Essa etapa traduz os nós da árvore de renderização em pixels reais na tela, exibindo efetivamente a página web.

Exemplo Prático: Construindo e Estilizando uma Página Web

Veja um exemplo simples de HTML que demonstra a interação entre HTML, CSS e o DOM:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample DOM Page</title>
    <style>
        #container {
            border: 2px solid black;
            padding: 20px;
            margin-top: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a sample paragraph to demonstrate the DOM in action.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heading = document.querySelector('h1');
            heading.style.backgroundColor = 'yellow';
        });
    </script>
</body>
</html>

Experimente Você Mesmo »

Explicação do Exemplo

Estrutura HTML: Este documento HTML define a estrutura da página, incluindo um contêiner div que contém um título e um parágrafo.
Estilização CSS: Estilos CSS inline estilizam o contêiner, o título e o parágrafo, demonstrando como o CSS afeta a aparência dos elementos HTML.
Interação JavaScript: Um script inline aguarda o carregamento do DOM e, em seguida, modifica a cor de fundo do título para amarelo. Essa interação mostra como JavaScript pode manipular o DOM após ele ter sido construído pelo navegador.

Lendo a árvore com JavaScript

Não é necessário um navegador para raciocinar sobre o DOM como uma estrutura de dados — ele é apenas um grafo de objetos. O trecho abaixo constrói uma pequena árvore de objetos simples que espelha a forma do DOM (filhos, nomes de tags, texto) e a percorre para contar os nós de elemento, exatamente da forma que querySelectorAll('*').length faria em um navegador:

// A minimal model of a DOM subtree.
const tree = {
  tag: 'body',
  children: [
    { tag: 'h1', children: [{ text: 'Hello' }] },
    {
      tag: 'p',
      children: [
        { text: 'A ' },
        { tag: 'em', children: [{ text: 'short' }] },
        { text: ' note.' },
      ],
    },
  ],
};

function countElements(node) {
  // A node is an "element" when it has a tag; text nodes only have `text`.
  let count = node.tag ? 1 : 0;
  for (const child of node.children ?? []) {
    count += countElements(child);
  }
  return count;
}

console.log(countElements(tree)); // 4

A árvore contém quatro nós de elemento (body, h1, p, em); as strings simples são nós de texto e não são contadas. Essa descida recursiva é a mesma ideia por trás do percurso real do DOM — veja Percorrendo o DOM para as APIs do navegador (childNodes, firstElementChild, parentNode e similares).

Armadilhas Comuns

Texto e espaços em branco também são nós. element.childNodes inclui nós de texto para as quebras de linha e espaços entre as tags. Use children ou firstElementChild quando quiser apenas elementos.
Execute scripts após o DOM existir. Um <script> no <head> é executado antes que o corpo seja analisado, então document.querySelector('h1') retorna null. Aguarde o DOMContentLoaded, coloque o script no final de <body> ou adicione o atributo defer.
innerHTML não é gratuito. Atribuir a innerHTML analisa novamente a string e reconstrói toda aquela subárvore, descartando os nós existentes e seus ouvintes de eventos. Para pequenas alterações de texto, prefira textContent; para alterações estruturais, considere DocumentFragments.
O DOM é dinâmico, o código-fonte HTML não. Editar o DOM nunca altera o arquivo HTML original, e "Ver Código-Fonte" mostra o arquivo como entregue, não o DOM atual. Use o painel Elements do navegador para inspecionar a árvore ao vivo.

Informação

Para otimizar as interações web, familiarize-se com as propriedades de nó do DOM. Entender os diferentes tipos de nó, como elementos e texto, aprimora sua capacidade de escrever JavaScript eficaz e direcionado para a manipulação dinâmica de conteúdo web.

Conclusão

Entender o DOM é essencial para qualquer desenvolvedor web. Ele fornece os meios para acessar e atualizar dinamicamente o conteúdo, a estrutura e o estilo de uma página web. Ao dominar como o DOM interage com HTML e CSS, os desenvolvedores podem criar aplicações web mais eficientes e dinâmicas. Esse conhecimento fundamental é crucial para manipular conteúdo web e criar sites interativos e dinâmicos.

Prática

Qual é o papel do JavaScript com o Document Object Model (DOM)?

JavaScript é usado para aplicar estilos CSS ao DOM.JavaScript pode manipular o DOM para adicionar, alterar ou remover elementos e atributos HTML.JavaScript é usado para armazenar e recuperar dados no DOM.JavaScript pode alterar todos os elementos HTML da página por meio do DOM.JavaScript é usado para tratar eventos em elementos HTML.JavaScript não pode alterar o conteúdo dos elementos HTML.