Manipular o DOM (Document Object Model) é uma habilidade essencial para criar páginas web interativas. O DOM representa a estrutura da página como uma árvore de objetos, e o JavaScript nos permite acessar e modificar esses objetos em tempo real. Nesta aula, vamos explorar quatro tópicos fundamentais: a diferença entre textContent e innerHTML, como alterar atributos, como modificar estilos e como criar e remover elementos dinamicamente.

Esses conceitos são a base para construir interfaces dinâmicas, como atualizar conteúdo sem recarregar a página, aplicar estilos condicionais, e adicionar ou remover elementos em resposta a ações do usuário. Vamos começar!

textContent vs innerHTML

Ambos são propriedades usadas para obter ou definir o conteúdo de um elemento, mas com diferenças importantes.

textContent retorna ou define apenas o texto puro, ignorando qualquer marcação HTML. É mais seguro e rápido, pois não interpreta HTML. Já innerHTML retorna ou define o conteúdo como HTML, permitindo incluir tags. No entanto, ao usar innerHTML com dados do usuário, há risco de segurança (XSS).

Exemplo prático:

// HTML: <div id="exemplo">Olá <strong>Mundo</strong>!</div>

const div = document.getElementById('exemplo');

console.log(div.textContent); // "Olá Mundo!"
console.log(div.innerHTML);   // "Olá <strong>Mundo</strong>!"

// Alterando com textContent
div.textContent = 'Novo texto'; // Resultado: <div>Novo texto</div>

// Alterando com innerHTML
div.innerHTML = '<em>Itálico</em>'; // Resultado: <div><em>Itálico</em></div>

Use textContent quando quiser apenas texto. Use innerHTML quando precisar inserir HTML, mas tome cuidado com a segurança.

Atributos

Podemos ler e modificar atributos de elementos HTML, como src, href, disabled, etc. Os principais métodos são getAttribute(), setAttribute(), removeAttribute() e a propriedade attributes.

Além disso, para atributos comuns, podemos acessá-los diretamente como propriedades do elemento (ex.: element.id, element.src). No entanto, para atributos personalizados (data-*), use dataset.

Exemplo prático:

// HTML: <a id="link" href="https://example.com" target="_blank" data-info="externo">Clique</a>

const link = document.getElementById('link');

// Lendo atributos
console.log(link.getAttribute('href')); // "https://example.com"
console.log(link.href); // URL completa: "https://example.com/"
console.log(link.dataset.info); // "externo"

// Modificando
link.setAttribute('href', 'https://novo.com');
link.target = '_self';
link.dataset.info = 'interno';

// Removendo
link.removeAttribute('target');

Prefira usar propriedades diretas quando possível, pois são mais rápidas e legíveis. Use setAttribute para atributos que não têm propriedade correspondente (ex.: aria-*).

Estilos

Para alterar estilos CSS via JavaScript, usamos a propriedade style de um elemento. Ela permite modificar estilos inline. Para ler estilos computados (aplicados por CSS), usamos getComputedStyle().

É importante notar que propriedades CSS com hífen (ex.: background-color) são convertidas para camelCase no JavaScript (backgroundColor).

Exemplo prático:

const box = document.getElementById('box');

// Alterando estilo diretamente
box.style.backgroundColor = 'red';
box.style.fontSize = '20px';
box.style.border = '2px solid black';

// Lendo estilo inline
console.log(box.style.backgroundColor); // 'red'

// Lendo estilo computado
const estilo = window.getComputedStyle(box);
console.log(estilo.backgroundColor); // 'rgb(255, 0, 0)'

// Removendo estilo inline
box.style.removeProperty('background-color');

Para múltiplas alterações, considere usar classes CSS e classList em vez de manipular style diretamente. Exemplo:

box.classList.add('destaque');
box.classList.remove('inativo');
box.classList.toggle('ativo');

Criar/remover elementos

Para criar novos elementos, usamos document.createElement(). Para adicioná-los ao DOM, usamos métodos como appendChild(), append(), prepend(), before(), after(), insertAdjacentHTML(), etc. Para remover, usamos removeChild() ou remove().

Exemplo prático:

// Criando um novo elemento
const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Este é um novo parágrafo.';
novoParagrafo.classList.add('novo');

// Adicionando ao final do body
document.body.appendChild(novoParagrafo);

// Adicionando antes de outro elemento
const referencia = document.getElementById('ref');
referencia.before(novoParagrafo); // ou referencia.parentNode.insertBefore(novoParagrafo, referencia);

// Removendo o elemento
novoParagrafo.remove(); // ou novoParagrafo.parentNode.removeChild(novoParagrafo);

// Inserindo HTML diretamente
const lista = document.getElementById('lista');
lista.insertAdjacentHTML('beforeend', '<li>Item novo</li>');

Lembre-se de que remove() é mais moderno e não requer referência ao pai. Para remover todos os filhos de um elemento, use element.innerHTML = '' ou um loop com removeChild.

Boas práticas

  • Prefira textContent a innerHTML para segurança e desempenho.
  • Use classList para manipular classes em vez de className ou setAttribute('class', ...).
  • Armazene referências a elementos frequentemente usados em variáveis para evitar consultas repetidas ao DOM.
  • Ao criar muitos elementos, use DocumentFragment para melhor desempenho.
  • Evite manipular o DOM em loops intensos; prefira construir uma string HTML e inserir de uma vez.

Referências

Exercícios

  1. Dado o HTML <div id="info">Olá <b>Mundo</b></div>, escreva código para alterar o conteúdo para <i>Novo</i> conteúdo usando innerHTML. Depois, usando textContent, altere para "Apenas texto".

    ✓ Resposta:
    const div = document.getElementById('info');
div.innerHTML = '<i>Novo</i> conteúdo';
div.textContent = 'Apenas texto';

  2. Crie um link (<a>) com id="meuLink" e href="https://google.com". Usando JavaScript, altere o atributo href para https://bing.com e adicione target="_blank". Verifique no console o valor de href após a alteração.

    ✓ Resposta:
    const link = document.getElementById('meuLink');
link.href = 'https://bing.com';
link.target = '_blank';
console.log(link.href); // "https://bing.com/"

  3. Dado um elemento <div id="box"></div>, use JavaScript para definir a cor de fundo como azul (blue), largura 200px e altura 100px. Depois, remova a propriedade de largura.

    ✓ Resposta:
    const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';
box.style.height = '100px';
box.style.removeProperty('width');

  4. Crie uma lista não ordenada (<ul>) com id="lista" e três itens (<li>) com textos "Item 1", "Item 2", "Item 3". Usando JavaScript, adicione um novo item "Item 4" ao final da lista e depois remova o primeiro item.

    ✓ Resposta:
    const lista = document.getElementById('lista');
const novoItem = document.createElement('li');
novoItem.textContent = 'Item 4';
lista.appendChild(novoItem);
const primeiroItem = lista.querySelector('li:first-child');
lista.removeChild(primeiroItem);

  5. Dado o HTML <div id="container"></div>, use JavaScript para adicionar um parágrafo (<p>) com o texto "Parágrafo adicionado" e uma classe "destaque". Em seguida, remova o parágrafo após 3 segundos usando setTimeout.

    ✓ Resposta:
    const container = document.getElementById('container');
const paragrafo = document.createElement('p');
paragrafo.textContent = 'Parágrafo adicionado';
paragrafo.classList.add('destaque');
container.appendChild(paragrafo);

setTimeout(() => {
  paragrafo.remove();
}, 3000);