O que é e como manipular oDOM nos navegadores

O Modelo de Objeto de Documentos, ou simplesmente, DOM (Document Object Model), é uma convenção criada pelo W3C que define padrões de como representar e interagir com qualquer documento HTML ou XML.

Para entendermos melhor qual é a aplicabilidade dessa convenção, precisamos antes entender como o navegadores fazem a renderização das páginas web.

Renderização das páginas Web

A renderização de páginas web pelos navegadores é um processo complexo que envolve várias etapas. Todavia, já na primeira podemos entender um dos aspectos fundamentais do DOM.

1. Carregamento e Análise do HTML

Quando você acessa uma página web, o navegador faz uma solicitação HTTP ao servidor para obter o documento HTML. Após receber o documento, o navegador processar o código e começa a construir a DOM Tree, como orientado pela convenção.

A DOM Tree é uma espécie de árvore de objetos que representa a estrutura hierárquica do documento, sendo cada tag um nó da árvore.

Exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Página de Exemplo</title>
  </head>
  <body>
    <h1>Bem-vindo!</h1>
    <p>Este é um exemplo.</p>
  </body>
</html>

A DOM Tree para esse HTML seria assim:

Document
 └── html
      ├── head
      │    └── title
      └── body
           ├── h1
           └── p

Nesse momento, o motor JavaScript, que é responsável por interpretar e executar o código JavaScript no navegador, adiciona à linguagem diversos pacotes de ferramentas permitindo a interação com o DOM Tree e ao navegador em si, entre esses pacotes temos a interface window e document.

Exemplo de uso da janela do navegador:

// redireciona o usuário para uma nova página web
window.location.href = "https://google.com"

Exemplo de uso da DOM Tree:

// pega o valor digitado em uma tag input
document.querySelector("input").value

Uma curiosidade, nem todos os navegadores usam os mesmos motores JavaScript. Por exemplo, o motor presente em navegadores Chromium (Microsoft Edge, Chrome, entre outros) é o V8, o motor do Safari para produtos da Apple (iPhone, MacOS, entre outros) é o JavaScriptCore, o do Firefox é o SpiderMonkey, e por ai vai.

Historicamente, antes da implementação de diversas convenções de compatibilidade entre navegadores, era muito comum ter códigos diferentes para fazer coisas parecidas em diferentes navegadores.

2. Construção do CSSOM

Enquanto o DOM é criado, o navegador também analisa os arquivos CSS vinculados ao documento ou estilos embutidos dentro do próprio HTML. Ele constrói uma árvore de objetos chamada CSSOM (CSS Object Model). A CSSOM representa a estrutura dos estilos aplicados aos elementos HTML. Assim como o DOM, é uma árvore, mas contendo informações de estilo.

3. Render Tree (Árvore de Renderização)

Após a construção do DOM e da CSSOM, o navegador combina essas duas estruturas para criar a Render Tree (Árvore de Renderização). A Render Tree contém todos os elementos visíveis na página, com seus estilos calculados (como cores, tamanhos e posições). Elementos invisíveis, como <head>, ou com display: none;, não aparecem na Render Tree.

4. Layout (Reflow)

Com a Render Tree pronta, o navegador calcula o layout da página, determinando as posições exatas e tamanhos dos elementos na tela. Esse processo é chamado de layout ou reflow. O navegador percorre a Render Tree para calcular as dimensões e posições de cada nó. Esse cálculo é feito de cima para baixo, a partir da raiz da árvore, que normalmente é o <body>.

5. Pintura (Painting)

Depois de calcular o layout, o navegador começa a pintar os pixels na tela, correspondentes aos elementos visíveis na Render Tree. Este processo é chamado de painting. O navegador desenha os elementos na tela, aplicando estilos como cores, bordas, sombras, imagens de fundo, etc.

6. Composição (Compositing)

Finalmente, o navegador compõe as diferentes camadas da página em uma única imagem para exibição ao usuário. Essa fase é importante para o desempenho, especialmente em páginas complexas com animações ou elementos em camadas. Se a página tem elementos que se sobrepõem ou efeitos como transformações 3D, o navegador divide esses elementos em camadas e os compõe juntos na tela final.

7. Interatividade e Atualizações

Após a renderização inicial, o navegador continua monitorando as interações do usuário e as atualizações do conteúdo. Se o JavaScript fizer qualquer alteração no DOM ou CSSOM, isso pode desencadear um novo layout (reflow) e pintura (repaint).

Está pronto para falar sobre suas metas e objetivos?Estou disponível para responder suas perguntas

Se precisar de mais informações ou quiser agendar sua aula experimental gratuita, entre em contato comigo pelo WhatsApp! Estou aqui para esclarecer suas dúvidas e mostrar como posso ajudar no seu aprendizado.

Ainda precisa daquela motivação extra?Leia algumas das histórias de sucesso dos alunos

Muitos de meus alunos conseguiram posições desejadas em grandes empresas de tecnologia, aumentaram seus salários e avançaram rapidamente em suas carreiras graças à mentoria personalizada e prática oferecida.

Andrey, 19 anos

Finalizou o ensino médio e estava um tanto quanto perdido sobre o que fazer do futuro. Conquistou seu primeiro emprego da vida em uma Software House ganhando 4 mil reais.

Kaique, 27 anos

Estudante de nutrição, trabalhando a vida toda em diferentes empregos para se sustentar. Conquistou seu primeiro emprego na área em uma empresa de escala nacional ganhando 10 mil reais.

Lucas, 22 anos

Iniciou algumas faculdades, mas sem sucesso, estava procurando formas de ganhar a vida como músico. Conquistou seu primeiro emprego da vida em uma Software House ganhando 6 mil reais.