Toda página web que você acessa tem uma estrutura por trás. Essa estrutura é representada pelo DOM — Document Object Model (Modelo de Objeto do Documento). Ele funciona como uma árvore que organiza todos os elementos da página, permitindo que scripts como o JavaScript leiam e modifiquem o conteúdo exibido no navegador.
Como funciona?
Quando o navegador carrega uma página HTML:
- Ele lê a página HTML.
- Constrói uma árvore de objetos (nós) que representam os elementos da página.
- Essa árvore é chamada de DOM.
- O JavaScript pode acessar e modificar essa árvore para mudar a página sem precisar recarregá-la.
Exemplo:
Se você tiver um código HTML assim:
<html>
<body>
<h1>Olá, mundo!</h1>
<p>Esse é um parágrafo.</p>
</body>
</html>O DOM será algo assim:
html
└── body
├── h1 (texto: "Olá, mundo!")
└── p (texto: "Esse é um parágrafo.")Cada tag vira um nó da árvore, e o conteúdo de texto é um nó filho.
Como alterar o DOM?
Com o JavaScript podemos acessar e modificar o DOM. Exemplo:
Acessar um elemento:
document.querySelector("h1")Modificar o conteúdo do elemento:
document.querySelector("h1").textContent = "Bem-vindo!"Por que modificar o DOM pode ser um problema
Vimos que toda vez que mudamos algo na interface, como o texto de um botão, o DOM precisa ser atualizado. O problema é que modificar o DOM diretamente pode ser lento, especialmente em páginas grandes ou com muitos elementos.
Por isso surgiram soluções como o Virtual DOM, usado por bibliotecas como o React, que otimizam esse processo ao reduzir o número de interações com o DOM real.
Conclusão
O DOM é a ponte entre o HTML e o JavaScript. Ele permite que páginas estáticas se tornem dinâmicas, interativas e inteligentes. No entanto, por ser uma estrutura complexa, sua manipulação direta pode afetar a performance, especialmente em aplicações grandes.
Por isso, entender como o DOM funciona é essencial para desenvolver interfaces modernas e eficientes — e também para compreender por que soluções como o Virtual DOM se tornaram tão populares no desenvolvimento web atual.