DOM (Document Object Model)
Definição
O DOM (Modelo de Objeto de Documento) (Document Object Model) é uma representação em árvore da estrutura de um documento HTML ou XML, mantida pelo navegador.
Cada elemento da página (como <div>
, <p>
, <img>
, etc.) é tratado como um nó (node) nessa árvore, com relações hierárquicas de pai, filho e irmãos.
Através do DOM, linguagens como JavaScript podem acessar, modificar ou remover elementos dinamicamente — o que torna possível a interatividade nas páginas web.
Objetivos do DOM
- Modelar a estrutura de documentos HTML como objetos navegáveis e manipuláveis.
- Permitir que linguagens como JavaScript acessem e modifiquem dinamicamente o conteúdo da página..
- Facilitar alterações dinâmicas, como adicionar elementos, alterar textos ou aplicar estilos.
- Fornecer uma API padronizada (por W3C) para navegadores manipularem documentos web.
Exemplo prático (JavaScript)
Selecionar e modificar elementos com DOM:
<!-- HTML + JavaScript -->
<h1>Minha Página</h1>
<p id="mensagem">Olá, mundo!</p>
<button onclick="alterarMensagem()">Clique aqui</button>
<script>
function alterarMensagem() {
const elemento = document.getElementById("mensagem");
elemento.textContent = "Você clicou no botão!";
}
</script>
Ao clicar no botão, o conteúdo do parágrafo é alterado dinamicamente.
O ciclo do DOM
[HTML carregado pelo navegador]
↓
[DOM é criado como estrutura em árvore]
↓
[JavaScript pode acessar e modificar nós do DOM]
↓
[Atualizações visuais são refletidas na página]
Exemplo de hierarquia DOM:
<html>
└──
<body>
├──
<h1>Minha Página</h1>
├──
<p id="mensagem">Olá, mundo!</p>
└── <button>Clique aqui</button>
</body>
</html>
Cada tag HTML é um nó, e pode ser manipulada via métodos como getElementById
, querySelector
, appendChild
, removeChild
, etc.