O que é o DOM (Document Object Model)?

dom

Se você já inspecionou uma página da web ou escreveu uma linha de JavaScript para mudar um texto na tela, você interagiu com o DOM. Mas o que exatamente é essa sigla e por que ela é o coração da internet dinâmica?

Neste artigo, vamos desmistificar o “Document Object Model”, entender sua estrutura de árvore e ver como ele conecta o código à interface visual.

ddr host

1. A Definição Fundamental

DOM significa Document Object Model (Modelo de Objeto de Documento).

Em termos simples, o DOM é uma representação na memória do navegador da sua página web. Ele atua como uma interface (API) que permite que linguagens de programação (principalmente o JavaScript) acessem e modifiquem o conteúdo, a estrutura e o estilo de um documento HTML ou XML.

Pense no DOM como um “tradutor”: O navegador lê o seu código HTML (que é apenas texto) e o traduz para o DOM (objetos que o computador entende e pode manipular).

2. A Analogia da Árvore (Tree Structure)

Para entender o DOM, você precisa visualizar uma árvore genealógica.

Quando o navegador carrega uma página, ele organiza os elementos HTML em uma hierarquia. Cada etiqueta (tag) HTML torna-se um “nó” (node) na árvore.

  • Raiz (Root): O topo da árvore é o objeto document (ou a tag <html>).
  • Pais (Parents): Elementos que contêm outros elementos (ex: um <body> contém um <h1>).
  • Filhos (Children): Elementos dentro de outros (ex: um <li> dentro de um <ul>).
  • Irmãos (Siblings): Elementos que compartilham o mesmo pai.

Exemplo Visual:

Código HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1>Olá, Mundo!</h1>
    <a href="#">Link</a>
  </body>
</html>

Representação no DOM:

  • document
    • html
      • head
      • body
        • h1 -> (nó de texto: “Olá, Mundo!”)
        • a -> (atributo: href) -> (nó de texto: “Link”)
targethost

3. DOM vs. Código Fonte HTML

Uma confusão comum é achar que o DOM e o código fonte (aquele que você vê ao clicar em “Exibir código fonte”) são a mesma coisa. Eles não são.

  1. Código Fonte (HTML): É o arquivo estático que reside no servidor. É o projeto arquitetônico da casa.
  2. DOM: É a casa construída e mobiliada. Se você usar JavaScript para mudar a cor da parede da sala (o background de uma div), o DOM muda, mas o arquivo HTML original no servidor permanece intacto.

Nota: O DOM inclui correções feitas pelo navegador (como fechar tags esquecidas) e alterações dinâmicas feitas por scripts após o carregamento da página.

4. Os Tipos de Nós (Nodes)

Tudo no DOM é um nó, mas existem tipos diferentes:

Tipo de NóDescrição
Document NodeA raiz da árvore. Representa a página inteira.
Element NodeAs tags HTML (ex: <div>, p, img). É o tipo mais comum.
Text NodeO texto real dentro das tags. (O texto não tem filhos).
Attribute NodePropriedades das tags (ex: class="btn", src="foto.jpg").
Comment NodeOs comentários no código (“).

5. A Ponte com o JavaScript

O DOM é “agnóstico de linguagem” (pode ser usado por Python, Java, etc.), mas na web, ele é o melhor amigo do JavaScript.

Sem o DOM, o JavaScript não teria como “ver” ou “tocar” na página web. O JavaScript usa o DOM para criar interatividade.

Como funciona a manipulação?

Aqui estão as operações mais comuns que os desenvolvedores fazem no DOM:

1. Selecionar Elementos

O script precisa “agarrar” um elemento antes de mudá-lo.

// Seleciona pelo ID
const titulo = document.getElementById('meu-titulo');

// Seleciona o primeiro parágrafo que encontrar
const paragrafo = document.querySelector('p');

2. Modificar Conteúdo

// Altera o texto
titulo.textContent = 'Novo Título!';

// Altera o HTML interno
paragrafo.innerHTML = 'Texto em <strong>negrito</strong>';

3. Alterar Estilos (CSS)

titulo.style.color = 'blue';
titulo.style.backgroundColor = '#f0f0f0';

4. Reagir a Eventos

O DOM permite que o código “escute” o que o usuário faz.

const botao = document.querySelector('button');

botao.addEventListener('click', function() {
  alert('Você clicou no botão!');
});
e-consulters

6. O Futuro e Frameworks Modernos (Virtual DOM)

Ao trabalhar com frameworks modernos como React, Vue ou Angular, você ouvirá falar do Virtual DOM.

Manipular o DOM real é “caro” em termos de processamento. Se você mudar muitas coisas ao mesmo tempo, a página pode ficar lenta.

  • O Problema: Atualizar o DOM real força o navegador a recalcular o layout e repintar a tela.
  • A Solução (Virtual DOM): O React, por exemplo, cria uma cópia leve do DOM na memória (Virtual DOM). Quando algo muda, ele compara a cópia com a versão nova, descobre exatamente o que mudou, e atualiza apenas aquela pequena parte no DOM real. Isso torna as aplicações web muito mais rápidas.

Resumo

  • DOM é a representação em árvore da sua página web que o navegador cria na memória.
  • Ele conecta o HTML (estrutura) ao JavaScript (comportamento).
  • Não é a mesma coisa que o código fonte; é uma entidade viva que pode mudar.
  • Dominar a manipulação do DOM é o primeiro passo para se tornar um desenvolvedor Front-End competente.

Descubra mais sobre Guia do Host

Assine para receber nossas notícias mais recentes por e-mail.

Deixe um comentário