A manipulação do DOM (Document Object Model) com JavaScript é um aspecto fundamental do desenvolvimento web. O DOM é uma representação da estrutura hierárquica de elementos HTML em uma página da web, e JavaScript permite que você acesse, modifique e manipule esses elementos dinamicamente. Neste artigo veremos alguns conceitos e técnicas básicas para a manipulação do DOM com JavaScript:

Selecionar elementos do DOM:

Podemos selecionar elementos HTML usando os métodos:

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.querySelector()

document.querySelectorAll()

Selecionando um elemento pelo ID

const element = document.getElementById(‘meuElemento’);

Selecionando elementos por classe

const elements = document.getElementsByClassName(‘minhaClasse’);

Seleciona elementos por tag

const elementos = document.getElementsByTagName(‘p’);

Seleciona o primeiro elemento que corresponde a um seletor CSS

const elemento = document.querySelector(‘.minhaClasse’);

Seleciona todos os elementos que correspondem a um seletor CSS

const elementos = document.querySelectorAll(‘p.minhaClasse’);

Modificar o conteúdo e os atributos:

Podemos alterar o conteúdo de elementos e atributos usando propriedades como:

innerHTML,  textContent, e setAttribute()

Por exemplo:

const element = document.getElementById(‘meuElemento’);

element.innerHTML = ‘Novo conteúdo’;

element.textContent = ‘Texto de conteúdo’;

element.setAttribute(‘id’, ‘novoID’);

Adicionar e remover elementos

Você pode adicionar novos elementos ou remover elementos existentes do DOM. Por exemplo:

Criar um novo elemento

const novoElemento = document.createElement(‘div’);

Adicionar o novo elemento como filho de outro elemento

const container = document.getElementById(‘container’);

container.appendChild(novoElemento);

Remover um elemento

const elementoParaRemover = document.getElementById(‘elementoParaRemover’);

elementoParaRemover.parentNode.removeChild(elementoParaRemover);

Eventos

O JavaScript permite que a atribuição de eventos a elementos HTML para responder a ações do    usuário, como cliques, mouseovers, etc.

Por exemplo:

const botao = document.getElementById(‘meuBotao’);

botao.addEventListener(‘click’, function() {

alert(‘Botão clicado’);

});

Manipulação de classes CSS:

Podemos adicionar, remover ou alternar classes CSS em elementos para controlar sua aparência e comportamento.

Por exemplo:

const elemento = document.getElementById(‘meuElemento’);

elemento.classList.add(‘minhaClasse’);

elemento.classList.remove(‘outraClasse’);

elemento.classList.toggle(‘classeAlternada’);

Essas são apenas algumas das muitas maneiras de manipular o DOM com JavaScript. A manipulação do DOM é uma habilidade essencial para criar aplicativos web interativos e dinâmicos.