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 (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.

Relacionados

Política de Privacidade

Copyright © www.programicio.com Todos os direitos reservados

É proibida a reprodução do conteúdo desta página sem autorização prévia do autor.

Contato: programicio@gmail.com