O Básico da Manipulação DOM que Precisas de Saber

Aprende a selecionar elementos, modificar conteúdo e alterar estilos. Estes três conceitos formam a base de quase tudo o resto.

7 min Iniciante Março 2026

Computador portátil aberto mostrando código JavaScript numa tela, com anotações ao lado

Porque é que isto Importa?

Se queres criar websites que respondem ao utilizador — não é suficiente ter HTML e CSS bonitos. Precisas de JavaScript para fazer as coisas acontecerem. E no coração de tudo está o DOM.

O DOM (Document Object Model) é basicamente a representação do teu HTML em forma que o JavaScript consegue manipular. Quando aprendes a trabalhar com ele, abre-se um mundo de possibilidades. Formulários que validam, botões que fazem coisas reais, conteúdo que muda sem recarregar a página.

Diagrama de estrutura DOM mostrando hierarquia de elementos HTML interligados

Os Três Pilares da Manipulação DOM

Domina estes três conceitos e consegues fazer praticamente qualquer coisa com JavaScript.

Selecionar Elementos

Antes de poderes modificar algo, precisas de encontrá-lo. JavaScript oferece várias maneiras — getElementById , querySelector , querySelectorAll . A forma mais comum? document.querySelector('.classe-aqui') .

Modificar Conteúdo

Depois de selecionares um elemento, podes mudar o texto dentro dele usando textContent ou innerHTML . Podes adicionar novos elementos com appendChild ou insertAdjacentHTML . É basicamente criar conteúdo dinamicamente.

Alterar Estilos

Podes mudar o CSS directamente com element.style.backgroundColor = 'red' ou adicionar/remover classes com classList.add() e classList.remove() . A segunda abordagem é geralmente melhor.

Começar: Selecionar Elementos

A forma mais moderna e flexível de selecionar elementos é usando querySelector e querySelectorAll . Porquê? Porque usam seletores CSS — coisa que já conheces.

Selecionar um elemento:

const button = document.querySelector('button');

const card = document.querySelector('.card-principal');

Selecionar vários elementos:

const cards = document.querySelectorAll('.card');

Repara que querySelectorAll devolve uma NodeList. Não é exatamente um array, mas consegues fazer loop através dela com forEach . Se precisares de um array de verdade, podes fazer Array.from(cards) .

Screenshot de código JavaScript mostrando exemplos de querySelector em ação num editor de texto

Animação visual mostrando elemento HTML sendo modificado em tempo real com mudanças de conteúdo

Modificar Conteúdo e Estrutura

Depois de selecionares um elemento, a parte divertida começa. Consegues mudar o que está dentro dele. Existem algumas formas de fazer isto, e cada uma tem o seu lugar.

textContent: Muda apenas o texto. Seguro para usar com dados de utilizadores.

innerHTML: Muda o HTML. Mais poderoso, mas cuidado com segurança (XSS).

appendChild: Adiciona um novo elemento como filho.

insertAdjacentHTML: Adiciona HTML num local específico (antes, depois, etc.).

Na prática? Se estás a mostrar dados do utilizador, usa textContent . Se estás a inserir HTML que tu próprio criaste, innerHTML é rápido. Para estruturas complexas, cria elementos com createElement e adiciona-os um por um.

Alterar Estilos com Inteligência

Consegues mudar estilos directamente: element.style.color = 'blue' . Funciona, mas não é a melhor abordagem. Porquê? Porque misturas CSS com JavaScript, tornando o código mais difícil de manter.

Abordagem Melhor: Usa classList para adicionar e remover classes CSS. Define os estilos no teu ficheiro CSS, e usa JavaScript apenas para gerir as classes.

element.classList.add('ativo');

element.classList.remove('ativo');

element.classList.toggle('ativo');

Isto mantém a separação entre apresentação (CSS) e comportamento (JavaScript). Quando precisas mudar como algo parece, editas o CSS. Quando precisas mudar quando isso acontece, editas o JavaScript. Muito mais limpo.

Visualização de diferentes estados CSS de um elemento — normal, hover, ativo — mostrando transições suaves

Um Exemplo Prático: Menu com Toggle

Vamos juntar tudo num exemplo real que verás em quase todo o website.

O HTML

Crias um botão e um menu. O menu começa escondido (com classe “escondido”).

O CSS

Definas que .menu.escondido tem display: none . Quando removeres a classe, o menu aparece.

O JavaScript

Selecionas o botão, adicionas um listener de click, e quando clicado, faz toggle da classe “escondido” no menu.

Sequência de três frames mostrando menu de navegação: fechado, transição, aberto

Cinco Dicas para Começar Bem

Testa no Console

Abre o DevTools (F12) e experimenta document.querySelector enquanto navegas. Isto acelera o aprendizado — vês os resultados imediatamente.

Começa Simples

Não comeces com frameworks complexos. Aprende vanilla JavaScript primeiro. Consegues fazer 90% do que precisas sem bibliotecas.

Cuidado com innerHTML

Se estás a inserir dados do utilizador com innerHTML , podes abrir a porta a ataques XSS. Usa textContent quando possível.

Usa Event Delegation

Em vez de adicionar listeners a cada item, adiciona um ao pai. Isto é mais eficiente, especialmente se temos muitos elementos.

Pensa em Acessibilidade

Quando mudas conteúdo com JavaScript, certificate que o código está acessível. Usa aria-* attributes quando apropriado.

“O DOM é onde o JavaScript encontra a realidade. Sem ele, JavaScript é apenas um linguagem bonita. Com ele, podes fazer websites que realmente funcionam.”
— Principio fundamental do web design moderno

Próximos Passos

Agora que entendes o básico — seleção, modificação de conteúdo, e estilos — estás pronto para aprender mais. O próximo passo lógico? Eventos. Como responder quando o utilizador clica, escreve, ou faz scroll.

Depois disso vem animação, validação de formulários, e comunicação com servidores. Mas tudo começa aqui. Estes três conceitos são o alicerce de tudo.

Pratica selecionando elementos aleatórios nos websites que visitas. Abre o DevTools e mexe com eles. Aprende por fazer.

Nota Importante

Este guia oferece uma introdução educacional aos conceitos de manipulação DOM em JavaScript. O conteúdo aqui é informativo e baseado em práticas web padrão. Cada projeto é diferente, e é sempre recomendável consultar a documentação oficial (MDN Web Docs, W3C) para casos de uso específicos ou avançados. As técnicas aqui apresentadas são compatíveis com navegadores modernos, mas testa sempre nos teus navegadores alvo.