JavaScript: Manipulação do DOM

Última atualização: 2026-10-13

O DOM (Document Object Model) é uma árvore que o navegador cria a partir do documento HTML. Operando nessa árvore com JavaScript, você pode mudar dinamicamente o conteúdo, a estrutura e os atributos da página — como colher frutas de uma árvore, enxertar novos galhos ou podar madeira morta.

Métodos DOM relacionados：querySelectorAll removeAttribute querySelector createElement setAttribute getAttribute textContent appendChild innerHTML NodeList remove() class href

1. Selecionando Elementos

O primeiro passo na manipulação do DOM é sempre "encontrar primeiro".

<div id="box" class="card active">Olá</div>
<div class="card">Mundo</div>
<p class="card">JS</p>

<script>
const porId = document.getElementById('box');
console.log('porId:', porId.textContent);

const porClasse = document.getElementsByClassName('card');
console.log('porClasse contagem:', porClasse.length);

const porTag = document.getElementsByTagName('p');
console.log('porTag:', porTag[0].textContent);

const primeiro = document.querySelector('.card');
console.log('querySelector:', primeiro.textContent);

const todos = document.querySelectorAll('.card');
console.log('querySelectorAll contagem:', todos.length);
</script>

2. Modificando Conteúdo

Depois de encontrar um elemento, a necessidade mais comum é mudar "o que ele diz".

• textContent: lê/escreve texto puro, seguro e eficiente.
• innerHTML: lê/escreve strings HTML, pode inserir tags, mas tem risco de XSS.

▶ Exemplo: textContent vs innerHTML

3. Modificando Atributos

Atributos de elementos HTML (id, class, src, href, etc.) também podem ser lidos e escritos com JS.

▶ Exemplo: Manipulando Atributos de Link

4. Criando e Inserindo Elementos

Uma das habilidades centrais de manipulação do DOM: "criar" um elemento do nada, depois conectá-lo à árvore.

▶ Exemplo: Adicionando Itens de Lista Dinamicamente

5. Removendo e Clonando Elementos

▶ Exemplo: Removendo e Clonando

Métodos DOM relacionados：querySelectorAll removeAttribute querySelector createElement setAttribute getAttribute textContent appendChild innerHTML NodeList remove() class href

❓ Perguntas Frequentes

📖 Resumo

• Dois campos para selecionar elementos: getElementBy* (melhor desempenho) e querySelector* (mais flexível). Para o dia a dia, querySelector é suficiente.
• Use textContent para alterações de texto, use innerHTML apenas quando precisar de HTML. Este último requer prevenção de XSS.
• Operações com atributos: getAttribute para ler, setAttribute para escrever, removeAttribute para excluir.
• Fluxo padrão para criar elementos: createElement → definir conteúdo/atributos → appendChild para montar.
• Duas formas de remover elementos: remove() (elemento remove a si mesmo), removeChild() (pai remove e você recebe o nó de volta).
• cloneNode(true) clona profundamente incluindo todos os descendentes, cloneNode(false) clona apenas a casca.

📝 Exercícios

1. Básico: Crie uma página que use createElement e appendChild para gerar dinamicamente uma lista contendo 5 nomes de cidades.
2. Intermediário: Adicione um botão de exclusão à lista do exercício anterior. Quando clicado, use removeChild para excluir o item da lista correspondente.
3. Desafio: Implemente um simples "gerenciador de notas" — um campo de input + botão de adicionar. Cada vez que você adicionar uma nota, crie um cartão com um botão de exclusão. Clicar no botão de exclusão remove aquele cartão.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós