1. O Que é o DOM?
O DOM é uma representação hierárquica de um documento HTML. Ele permite que cada parte da página, como elementos, atributos e textos, sejam acessados e modificados usando JavaScript. Ao carregar uma página web, o navegador cria automaticamente o DOM, que pode ser manipulado para criar interações dinâmicas.
2. Selecionando Elementos do DOM
A primeira etapa da manipulação do DOM é selecionar os elementos que você deseja modificar. O JavaScript oferece diversos métodos para isso:
2.1. getElementById()
Esse método seleciona um elemento pelo seu ID.
// Selecionando um elemento com o ID "titulo"
const titulo = document.getElementById('titulo');
2.2. getElementsByClassName()
Esse método retorna uma lista de elementos que possuem uma classe específica.
// Selecionando todos os elementos com a classe "paragrafo"
const paragrafos = document.getElementsByClassName('paragrafo');
2.3. querySelector() e querySelectorAll()
O querySelector() seleciona o primeiro elemento que corresponde a um seletor CSS, enquanto o querySelectorAll() seleciona todos os elementos que correspondem ao seletor.
// Selecionando o primeiro elemento
const paragrafo = document.querySelector('p');
// Selecionando todos os elementos
const paragrafos = document.querySelectorAll('p');
3. Alterando o Conteúdo de Elementos
Uma vez que o elemento é selecionado, você pode modificar seu conteúdo. Existem algumas maneiras de fazer isso:
3.1. innerHTML
O innerHTML permite alterar o conteúdo HTML interno de um elemento.
// Alterando o conteúdo de um elemento
titulo.innerHTML = 'Bem-vindo ao meu site!';
3.2. textContent
O textContent modifica apenas o texto de um elemento, sem interpretar o HTML.
// Alterando apenas o texto
titulo.textContent = 'Novo Título';
4. Alterando Atributos de Elementos
Você também pode alterar atributos de elementos HTML, como classes, IDs e outros atributos personalizados.
4.1. setAttribute()
O método setAttribute() define o valor de um atributo de um elemento.
// Alterando o atributo src de uma imagem
const imagem = document.querySelector('img');
imagem.setAttribute('src', 'nova-imagem.jpg');
4.2. Modificando Classes
O classList permite adicionar, remover ou alternar classes CSS em elementos HTML.
// Adicionando e removendo classes
titulo.classList.add('destaque');
titulo.classList.remove('destaque');
// Alternando uma classe (adiciona se não estiver presente, remove se estiver)
titulo.classList.toggle('destaque');
5. Criando e Removendo Elementos
Você pode criar novos elementos dinamicamente e adicioná-los ao DOM, bem como remover elementos existentes.
5.1. createElement() e appendChild()
O método createElement() cria um novo elemento HTML, e appendChild() o adiciona ao DOM.
// Criando um novo parágrafo
const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Este é um novo parágrafo.';
// Adicionando o novo parágrafo ao body
document.body.appendChild(novoParagrafo);
5.2. removeChild()
O método removeChild() remove um elemento filho de um elemento pai.
// Removendo um elemento do DOM
const container = document.querySelector('.container');
const elementoParaRemover = document.querySelector('.item');
container.removeChild(elementoParaRemover);
6. Lidando com Eventos
Os eventos permitem que você responda a interações do usuário, como cliques, movimentos do mouse, pressionamento de teclas e muito mais.
6.1. addEventListener()
O método addEventListener() é utilizado para associar eventos a elementos. Quando o evento ocorre, uma função de callback é executada.
// Adicionando um evento de clique a um botão
const botao = document.querySelector('button');
botao.addEventListener('click', () => {
alert('Botão clicado!');
});
Conclusão
A manipulação do DOM com JavaScript é uma habilidade essencial para qualquer desenvolvedor web. Desde a simples alteração de conteúdo até a criação dinâmica de elementos e o gerenciamento de eventos, o DOM permite que você torne suas páginas interativas e responsivas. Com essas técnicas, você pode melhorar a experiência do usuário e criar interfaces ricas e dinâmicas.