O que é DOM em JavaScript? Entenda de forma simples e prática

🌐 O que é o DOM?

DOM é a sigla para Document Object Model, ou em português, Modelo de Objeto do Documento. Ele é uma representação da estrutura da sua página HTML em forma de árvore de objetos.

Essa estrutura permite que o JavaScript acesse, modifique e interaja com os elementos do site de forma dinâmica, sem precisar recarregar a página.

Imagine que sua página web é como uma árvore genealógica. O DOM organiza os elementos em pais, filhos e irmãos — e o JavaScript pode conversar com qualquer um deles.

🛠️ Para que serve o DOM?

Com o DOM, podemos:

Alterar o texto de um parágrafo

Mudar o estilo de um botão

Criar elementos novos (como um aviso)

Remover elementos da página

Capturar eventos (como cliques, teclas, envio de formulários)

Tudo isso acontece com alguns comandos simples.

💡 Exemplo prático

Veja um exemplo básico de como usar o DOM com JavaScript:

html

Copy code

<button id="meuBotao">Clique aqui</button>

<p id="mensagem"></p>

<script>

  const botao = document.getElementById("meuBotao");

  const mensagem = document.getElementById("mensagem");

  botao.addEventListener("click", function() {

    mensagem.textContent = "Você clicou no botão!";

  });

</script>

Nesse exemplo, ao clicar no botão, o JavaScript altera o conteúdo do parágrafo. Tudo isso acontece graças ao DOM.

📚 Por que aprender DOM?

Se você quer construir sites interativos, aprender a manipular o DOM é essencial. Com ele, você pode transformar uma página estática em algo dinâmico e responsivo.

É o primeiro passo para evoluir como desenvolvedor front-end e dominar bibliotecas como React, Vue ou jQuery, que também trabalham com o DOM (de forma simplificada).

Gostou do conteúdo?

Compartilhe com quem também está aprendendo JavaScript!

Deixe seu comentário aqui no blog se tiver dúvidas ou quiser ver mais exemplos.

#JavaScript #DOM #DesenvolvimentoWeb #Frontend #EstudoTI