Como manipular elementos do DOM com JavaScript?

Para manipular elementos do DOM (Document Object Model) com JavaScript, existem várias APIs e métodos disponíveis que permitem acessar, modificar e interagir com os elementos HTML. Aqui estão algumas das principais maneiras de manipular o DOM usando JavaScript:

1. Acesso a elementos:

• document.getElementById('id'): Retorna o elemento com o ID especificado.
• document.querySelector('seletor'): Retorna o primeiro elemento que corresponde ao seletor CSS especificado.
• document.querySelectorAll('seletor'): Retorna uma lista de todos os elementos que correspondem ao seletor CSS especificado.

1. Modificação de conteúdo:

• element.innerHTML: Obtém ou define o conteúdo HTML dentro de um elemento.
• element.textContent: Obtém ou define o conteúdo de texto de um elemento.
• element.setAttribute('nome', 'valor'): Define o valor de um atributo em um elemento.
• element.style.property = 'valor': Modifica o estilo de um elemento.

1. Manipulação de classes:

• element.classList.add('classe'): Adiciona uma classe a um elemento.
• element.classList.remove('classe'): Remove uma classe de um elemento.
• element.classList.toggle('classe'): Adiciona a classe se ela não estiver presente e a remove se estiver presente.
• element.classList.contains('classe'): Verifica se um elemento possui uma classe específica.

1. Manipulação de eventos:

• element.addEventListener('evento', callback): Adiciona um ouvinte de evento a um elemento.
• element.removeEventListener('evento', callback): Remove um ouvinte de evento de um elemento.

1. Manipulação de atributos e estilos:

• element.getAttribute('nome'): Obtém o valor de um atributo de um elemento.
• element.setAttribute('nome', 'valor'): Define o valor de um atributo em um elemento.
• element.style.property = 'valor': Modifica o estilo de um elemento.

Esses são apenas alguns exemplos das muitas APIs e métodos disponíveis para manipulação do DOM com JavaScript. A documentação oficial do JavaScript e referências online fornecem detalhes completos sobre esses métodos e suas opções de uso.