O DOM: Acessando e Manipulando Elementos HTML com JavaScript

abril 18, 2026

O DOM: Acessando e Manipulando Elementos HTML com JavaScript

Bem-vindo(a) ao post no blog.

🧠 O que é o DOM

DOM significa Document Object Model (Modelo de Objeto do Documento).
É uma representação em árvore de todos os elementos HTML da página.

💬 Em termos simples:

O DOM é a “ponte” entre o HTML e o JavaScript.

O navegador transforma sua página HTML em uma estrutura de objetos, que o JS pode acessar e manipular.

🔍 Visualizando o DOM (estrutura)

<html>

<body>

<h1>Título</h1>

<p>Parágrafo</p>

<button>Botão</button>

</body>

</html>

💡 Internamente, o navegador cria algo como:

document

└── html

├── head

└── body

├── h1

├── p

└── button

Cada elemento pode ser acessado, modificado, criado ou removido via JavaScript.

🧩 Como acessar elementos no DOM

O objeto document representa toda a página, e é através dele que podemos buscar e manipular elementos.

Existem vários métodos de seleção:

Método	Descrição	Exemplo
getElementById()	Busca um único elemento pelo ID	document.getElementById("titulo")
getElementsByClassName()	Busca elementos pela classe	document.getElementsByClassName("item")
getElementsByTagName()	Busca elementos pela tag	document.getElementsByTagName("p")
querySelector()	Retorna o primeiro elemento que combina com um seletor CSS	document.querySelector(".caixa")
querySelectorAll()	Retorna todos os elementos que combinam com o seletor CSS	document.querySelectorAll("div")

💡 Exemplo prático

<h1 id="titulo">Olá Mundo</h1>

<p class="mensagem">Bem-vindo ao DOM!</p>

const elementoTitulo = document.getElementById("titulo");

const elementoMensagem = document.querySelector(".mensagem");

console.log(elementoTitulo.textContent);

console.log(elementoMensagem.textContent);

</script>

✅ No console, o JS mostrará:

Olá Mundo

Bem-vindo ao DOM!

🧮 Modificando conteúdo HTML

Você pode alterar o texto ou o HTML interno de qualquer elemento.

Propriedade	Função
.textContent	Altera o texto dentro do elemento
.innerHTML	Altera o conteúdo HTML interno
.innerText	Parecido com .textContent, mas respeita estilos visuais (ex.: ocultos)

Exemplo 1:

<h1 id="titulo">Título antigo</h1>

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

titulo.textContent = "Título atualizado via JavaScript!";

</script>

💬 O texto muda automaticamente na tela.

Exemplo 2 — Usando innerHTML

let msg = document.getElementById("mensagem");

msg.innerHTML = "<strong>Bem-vindo!</strong> Tudo pronto para aprender DOM!";

</script>

💡 innerHTML permite inserir tags HTML dentro da string.

🎨 Manipulando Estilos (CSS via JS)

Você pode alterar propriedades CSS diretamente através do JS com .style.

Exemplo:

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

caixa.style.background = "lightgreen";

caixa.style.borderRadius = "10px";

caixa.style.border = "2px solid #333";

</script>

💬 O JavaScript manipula o estilo do elemento em tempo real.

🧠 Dica: nomes CSS com hífen se transformam em camelCase.

● background-color ➜ backgroundColor

● font-size ➜ fontSize

● text-align ➜ textAlign

⚙️ Alterando Atributos HTML

Use o método setAttribute() para alterar qualquer atributo de um elemento, ou getAttribute() para consultar o valor atual.

Exemplo:

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

imagem.setAttribute("src", "foto2.jpg");

imagem.setAttribute("alt", "Imagem alterada via JS");

console.log(imagem.getAttribute("src"));

</script>

💡 Assim, você pode mudar imagens dinamicamente (ótimo para slides, galerias, etc.).

🧩 Criando e Adicionando Elementos

Podemos criar novos elementos HTML via código.

Exemplo:

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

const novoItem = document.createElement("p");

novoItem.textContent = "Este parágrafo foi criado via JavaScript.";

lista.appendChild(novoItem);

</script>

💡 createElement() cria um novo elemento, e appendChild() o adiciona dentro do elemento pai.

❌ Removendo Elementos

Use remove() ou removeChild() para excluir elementos.

Exemplo:

<p id="texto">Esse texto vai sumir...</p>

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

texto.remove(); // Remove o elemento da página

</script>

💬 Esse comando é muito usado para remover mensagens automáticas (ex.: “alertas de sucesso”).

🔁 Percorrendo Múltiplos Elementos

Com querySelectorAll() ou getElementsByClassName(), você manipula listas de elementos.

<ul>

</ul>

const itens = document.querySelectorAll(".item");

itens.forEach((elemento, i) => {

elemento.textContent = `Novo texto ${i + 1}`;

elemento.style.color = "blue";

});

</script>

💡 O método .forEach() percorre todos os itens e aplica uma mudança a cada um.

🖱️ DOM + Eventos: Criando Interatividade

Combine eventos com manipulação do DOM para gerar interações dinâmicas.

Exemplo — Mostrar e esconder conteúdo

<button id="mostrar">Mostrar</button>

<button id="ocultar">Ocultar</button>

<p id="texto">Este é um texto dinâmico!</p>

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

const btnMostrar = document.getElementById("mostrar");

const btnOcultar = document.getElementById("ocultar");

btnMostrar.addEventListener("click", () => {

texto.style.display = "block";

});

btnOcultar.addEventListener("click", () => {

texto.style.display = "none";

});

</script>

💬 Você uniu eventos + controle do DOM ➜ página totalmente interativa!

🧮 Exemplo Completo — Lista de Tarefas Simples

<h2>Lista de Tarefas</h2>

<button id="adicionar">Adicionar</button>

const input = document.getElementById("tarefa");

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

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

botao.addEventListener("click", () => {

const texto = input.value.trim();

if (texto !== "") {

const li = document.createElement("li");

li.textContent = texto;

lista.appendChild(li);

input.value = ""; // limpar campo

}

});

</script>

💡 Esse é o primeiro passo para uma to-do list completa — algo que construiremos mais à frente!

⚠️ Dicas e Boas Práticas

✅ Sempre use const e let para armazenar referências (nunca var);
✅ Prefira querySelector() e querySelectorAll() (são mais versáteis);
✅ Use classList.add(), remove() e toggle() para manipular classes;
✅ Evite innerHTML com conteúdo externo — pode criar falhas de segurança (XSS);
✅ Mantenha o HTML limpo, deixe a lógica no JS.

💡 Exercício Prático

Crie uma pequena página que:

1. Mostre um título <h1> “Bem-vindo!”;

2. Tenha um botão “Mudar cor”;

3. Ao clicar, o título mude de cor aleatoriamente.

💬 Dica:

function corAleatoria() {

const r = Math.floor(Math.random() * 256);

const g = Math.floor(Math.random() * 256);

const b = Math.floor(Math.random() * 256);

return `rgb(${r}, ${g}, ${b})`;

}

document.getElementById("botao").addEventListener("click", () => {

document.querySelector("h1").style.color = corAleatoria();

});

✨ Uma forma divertida de combinar funções + DOM + eventos.

🧠 Hoje você aprendeu:

✔ O que é o DOM e sua importância no JavaScript;
✔ Diferentes formas de acessar e selecionar elementos;
✔ Como modificar texto, HTML, atributos e estilos;
✔ Como criar, adicionar e remover elementos dinamicamente;
✔ Como percorrer listas e interagir com o usuário;
✔ E criou exemplos funcionais de interatividade real.

🎓 Conclusão

Agora você domina o DOM, o motor que conecta o JavaScript ao HTML.
Você é capaz de controlar completamente o conteúdo e o comportamento da página.

A partir da próxima aula, você aprenderá a manipular estilos, classes e efeitos visuais diretamente pelo JavaScript, criando páginas ainda mais dinâmicas e modernas.

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

Pesquisar este blog

Academy Code Christ