Manipulação do DOM

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.

Selecionando Elementos

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

Exemplo: Comparando os Cinco Métodos de Seleção

<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>

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

<div id="safe"></div>
<div id="danger"></div>

<script>
const safe = document.getElementById('safe');
safe.textContent = '<b>Isto não ficará em negrito</b>';

const danger = document.getElementById('danger');
danger.innerHTML = '<b>Isto ficará em negrito</b>';
</script>

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

<a id="link" href="https://example.com" target="_blank">Link de Exemplo</a>

<script>
const link = document.getElementById('link');

console.log('href:', link.getAttribute('href'));

link.setAttribute('href', 'https://mdn.io');
link.setAttribute('title', 'Clique para ir ao MDN');

link.removeAttribute('target');

console.log('Após modificação:', link.getAttribute('href'));
</script>

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

<ul id="list">
  <li>Item existente</li>
</ul>

<script>
const lista = document.getElementById('list');

const li = document.createElement('li');
li.textContent = 'Item adicionado recentemente';
lista.appendChild(li);

const li2 = document.createElement('li');
li2.textContent = 'Inserido no início';
lista.insertBefore(li2, lista.firstChild);
</script>

Removendo e Clonando Elementos

Exemplo: Removendo e Clonando

<ul id="fruits">
  <li>Maçã</li>
  <li>Banana</li>
  <li>Laranja</li>
</ul>

<script>
const frutas = document.getElementById('fruits');

const banana = frutas.children[1];
const removido = frutas.removeChild(banana);
console.log('Removido:', removido.textContent);

const clone = frutas.cloneNode(true);
document.body.appendChild(clone);
console.log('Lista clonada');
</script>

📖 Resumo

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

❓ Perguntas Frequentes

P: O que acontece se querySelector retornar null? R: Chamar qualquer propriedade/método em null lançará um TypeError. Então é melhor verificar antes de operar: const el = document.querySelector('.xxx'); if (el) { ... }.

P: Qual a diferença entre HTMLCollection e NodeList? R: HTMLCollection é ao vivo — atualiza automaticamente quando o DOM muda; NodeList de querySelectorAll é um snapshot estático. Ao iterar e adicionar/remover elementos, uma coleção estática é mais segura, senão você pode entrar em loop infinito.

P: O que acontece se você fizer appendChild de um nó que já existe? R: O nó "se move" da posição original para a nova posição. No DOM, o mesmo nó só pode aparecer uma vez. Isso é uma cópia, não uma movimentação.

📝 Atividades

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.