O que é o DOM em JavaScript? (Guia Completo para Iniciantes)

abril 18, 2026

O que é o DOM em JavaScript? (Guia Completo para Iniciantes)

Bem-vindo(a) ao post no blog.

Neste post, você vai aprender o que é o DOM, como o JavaScript usa ele para manipular elementos HTML em tempo real, e como criar páginas verdadeiramente interativas e dinâmicas.

Caso queira se aprofundar mais, temos outros conteúdos que vão te ajudar a evoluir ainda mais:

🌐 O que é o DOM?

Quando o navegador carrega uma página HTML, ele não enxerga o código como um simples texto. Ele transforma esse código em uma estrutura organizada em formato de árvore, chamada de DOM — Document Object Model (Modelo de Objeto do Documento).

Pense assim:

Imagine seu HTML como uma árvore genealógica:

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        ├── p
        └── div
            ├── img
            └── button

Cada elemento HTML se torna um nó (node) nessa árvore. E o JavaScript consegue acessar, modificar, criar e deletar qualquer um desses nós.

💬 Em outras palavras: o DOM é a ponte entre o HTML e o JavaScript.

🔍 Por que o DOM é tão importante?

Sem o DOM, o JavaScript não conseguiria:

❌ Mudar o texto de um parágrafo
❌ Esconder ou mostrar elementos
❌ Adicionar classes CSS dinamicamente
❌ Criar elementos novos na página
❌ Responder a cliques, formulários e eventos

Com o DOM, tudo isso se torna possível:

✅ Alterar conteúdo sem recarregar a página
✅ Criar menus interativos
✅ Validar formulários em tempo real
✅ Construir aplicações dinâmicas completas

🎯 Acessando Elementos do DOM

O JavaScript oferece vários métodos para encontrar e selecionar elementos na página.

📌 1. getElementById

Seleciona um elemento pelo seu id único.

html

<!-- HTML -->
<h1 id="titulo">Olá, Mundo!</h1>

javascript

// JavaScript
const titulo = document.getElementById("titulo");
console.log(titulo); // Retorna o elemento <h1>

📌 2. getElementsByClassName

Seleciona todos os elementos com uma determinada classe.

html

<!-- HTML -->
<p class="descricao">Texto 1</p>
<p class="descricao">Texto 2</p>
<p class="descricao">Texto 3</p>

javascript

// JavaScript
const paragrafos = document.getElementsByClassName("descricao");
console.log(paragrafos); // Retorna uma coleção com os 3 elementos

⚠️ Atenção: O retorno é uma HTMLCollection (parecida com um array, mas não é exatamente um array).

📌 3. querySelector e querySelectorAll

Os mais modernos e poderosos. Usam a mesma sintaxe dos seletores CSS.

javascript

// Seleciona o PRIMEIRO elemento encontrado
const titulo = document.querySelector("h1");
const botao = document.querySelector("#meu-botao");
const card = document.querySelector(".card");

// Seleciona TODOS os elementos encontrados
const todosOsLinks = document.querySelectorAll("a");
const todosOsCards = document.querySelectorAll(".card");

💡 Dica: Na prática, querySelector e querySelectorAll são os mais usados no dia a dia do desenvolvimento moderno.

✏️ Modificando Elementos do DOM

Depois de selecionar um elemento, você pode alterar seu conteúdo, estilo e atributos.

📌 Alterando o texto — innerHTML e textContent

html

<!-- HTML -->
<p id="mensagem">Texto original</p>
<button onclick="mudarTexto()">Clique aqui</button>

javascript

// JavaScript
function mudarTexto() {
  const paragrafo = document.getElementById("mensagem");

  // textContent → altera apenas o texto
  paragrafo.textContent = "Texto alterado com JavaScript!";

  // innerHTML → permite inserir HTML dentro do elemento
  paragrafo.innerHTML = "<strong>Texto em negrito!</strong>";
}

🧠 Lembre-se:

textContent → apenas texto puro, mais seguro

innerHTML → interpreta tags HTML, mais poderoso (mas cuidado com segurança)

📌 Alterando estilos CSS com JavaScript

html

<div id="caixa" style="width: 200px; height: 200px; background: blue;"></div>
<button onclick="mudarCor()">Mudar cor</button>

javascript

function mudarCor() {
  const caixa = document.getElementById("caixa");
  caixa.style.backgroundColor = "red";
  caixa.style.borderRadius = "50%";
  caixa.style.width = "300px";
}

💡 Dica importante: No JavaScript, propriedades CSS com hífen viram camelCase:
background-color → backgroundColor
border-radius    → borderRadius
font-size        → fontSize

📌 Adicionando e Removendo Classes CSS

Esta é a forma mais recomendada de alterar estilos via JavaScript, pois mantém o CSS separado.

css

/* CSS */
.destaque {
  background-color: yellow;
  font-weight: bold;
  padding: 10px;
}

.escondido {
  display: none;
}

javascript

const elemento = document.querySelector("#meu-elemento");

// Adicionar uma classe
elemento.classList.add("destaque");

// Remover uma classe
elemento.classList.remove("destaque");

// Alternar (toggle) — adiciona se não tiver, remove se tiver
elemento.classList.toggle("escondido");

// Verificar se tem uma classe
console.log(elemento.classList.contains("destaque")); // true ou false

📌 Alterando Atributos HTML

html

<img id="foto" src="imagens/foto1.jpg" alt="Foto inicial">
<button onclick="trocarFoto()">Trocar foto</button>

javascript

function trocarFoto() {
  const imagem = document.getElementById("foto");

  // Alterar o atributo src
  imagem.setAttribute("src", "imagens/foto2.jpg");
  imagem.setAttribute("alt", "Nova foto carregada");

  // Ler um atributo
  console.log(imagem.getAttribute("src"));

  // Remover um atributo
  // imagem.removeAttribute("alt");
}

➕ Criando e Removendo Elementos Dinamicamente

O DOM permite criar novos elementos HTML do zero, direto pelo JavaScript.

📌 Criando elementos com createElement

html

<!-- HTML -->
<ul id="lista"></ul>
<button onclick="adicionarItem()">Adicionar item</button>

javascript

// JavaScript
let contador = 1;

function adicionarItem() {
  const lista = document.getElementById("lista");

  // 1. Cria o elemento
  const novoItem = document.createElement("li");

  // 2. Define o conteúdo
  novoItem.textContent = "Item número " + contador;

  // 3. Adiciona à lista
  lista.appendChild(novoItem);

  contador++;
}

🔎 Resultado: Cada vez que o botão é clicado, um novo <li> é adicionado na lista!

📌 Removendo elementos com remove()

javascript

function removerElemento() {
  const elemento = document.getElementById("meu-paragrafo");
  elemento.remove(); // Remove diretamente do DOM
}

🖱️ Eventos — Deixando a Página Interativa

Um evento é qualquer ação que acontece na página: um clique, um movimento do mouse, um campo sendo preenchido.

📌 Principais eventos:

click         → quando o usuário clica
mouseover     → quando o mouse passa por cima
mouseout      → quando o mouse sai
keydown       → quando uma tecla é pressionada
keyup         → quando a tecla é solta
submit        → quando um formulário é enviado
change        → quando um input tem seu valor alterado
load          → quando a página termina de carregar

📌 Formas de usar eventos:

Forma 1 — Diretamente no HTML (simples, mas não recomendada):

html

<button onclick="minhaFuncao()">Clique aqui</button>

Forma 2 — Via JavaScript com addEventListener (recomendada ✅):

javascript

const botao = document.querySelector("#meu-botao");

botao.addEventListener("click", function() {
  alert("Botão clicado!");
});

Forma 3 — Com função nomeada (mais organizado ✅):

javascript

const botao = document.querySelector("#meu-botao");

function aoClicar() {
  console.log("Clicou no botão!");
}

botao.addEventListener("click", aoClicar);

💡 Dica: Sempre prefira addEventListener — é mais flexível, moderno e permite múltiplos eventos no mesmo elemento.

💡 Exemplo Completo — Lista de Tarefas Dinâmica

Veja tudo que aprendemos funcionando junto:

html

      });

      // Cria o botão de remover
      const btnRemover = document.createElement("button");
      btnRemover.textContent = "Remover";
      btnRemover.classList.add("btn-remover");

      btnRemover.addEventListener("click", function() {
        item.remove();
      });

      // Monta o item
      item.appendChild(span);
      item.appendChild(btnRemover);
      lista.appendChild(item);

      // Limpa o input
      input.value = "";
      input.focus();
    }
  </script>

</body>
</html>

html 3

🔎 O que esse projeto usa:

getElementById e querySelector

createElement e appendChild

addEventListener com click e keydown

classList.toggle

element.remove()

textContent e value

🚨 Boas Práticas com DOM

basic

1. ✅ Sempre espere o DOM carregar antes de manipulá-lo
2. ✅ Prefira querySelector ao invés de getElementById (mais versátil)
3. ✅ Separe o JavaScript do HTML — evite onclick="" no HTML
4. ✅ Use classList.add/remove ao invés de alterar style diretamente
5. ✅ Armazene referências em variáveis para não buscar o mesmo elemento várias vezes
6. ✅ Valide entradas do usuário antes de inserir no DOM

🔑 Pontos-Chave do Post

💡 O DOM é a representação em árvore do HTML carregado pelo navegador

💡 JavaScript usa o DOM para ler, modificar, criar e deletar elementos em tempo real

💡 addEventListener é a forma moderna e correta de trabalhar com eventos

✍️ Exercício Prático

Crie um arquivo chamado dom-pratica.html com o seguinte desafio:

mipsasm

1. Um <h2> com o texto "Cor atual: azul"

2. Três botões: "Vermelho", "Verde", "Amarelo"

3. Ao clicar em cada botão:
   → O <h2> deve mudar o texto para "Cor atual: [cor clicada]"
   → O fundo da página deve mudar para essa cor

4. (Desafio extra)
   → Adicione um botão "Resetar"
   → Ao clicar, volte o fundo para branco e o texto para "Cor atual: nenhuma"

💡 Dica de organização de arquivos:

/projeto-dom
  index.html
  style.css
  script.js    ← sempre separado!

📚 Continue aprendendo JavaScript:

📌 Condicionais em JavaScript (if, else, switch)

📌 Laços de Repetição (for, while) em JavaScript

📌 Funções em JavaScript — Guia Completo

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕

Pix: antropologiacrista@gmail.com