Manipulação do DOM

O Document Object Model (DOM) é uma representação em memória do conteúdo de um documento HTML ou XML que pode ser acessado e manipulado através do JavaScript. A manipulação do DOM permite que os desenvolvedores criem páginas da web dinâmicas e interativas. Aqui estão alguns exemplos de manipulação do DOM com JavaScript:

Selecionando elementos: os desenvolvedores podem selecionar elementos HTML usando o método getElementById ou o método querySelector. Por exemplo, document.getElementById('meu-elemento') seleciona um elemento com o ID "meu-elemento".

Alterando o conteúdo: os desenvolvedores podem alterar o conteúdo de um elemento usando a propriedade innerHTML. Por exemplo, document.getElementById('meu-elemento').innerHTML = 'Novo conteúdo' altera o conteúdo de um elemento com o ID "meu-elemento" para "Novo conteúdo".

Alterando os atributos: os desenvolvedores podem alterar os atributos de um elemento, como o src de uma imagem ou o href de um link. Por exemplo, document.getElementById('minha-imagem').src = 'nova-imagem.jpg' altera o src de uma imagem com o ID "minha-imagem" para "nova-imagem.jpg".

Adicionando e removendo classes: os desenvolvedores podem adicionar e remover classes CSS de elementos usando as propriedades classList.add e classList.remove. Por exemplo, document.getElementById('meu-elemento').classList.add('minha-classe') adiciona a classe "minha-classe" a um elemento com o ID "meu-elemento".

Adicionando e removendo elementos: os desenvolvedores podem adicionar e remover elementos HTML usando os métodos createElement, appendChild e removeChild. Por exemplo, var novoElemento = document.createElement('div'); document.body.appendChild(novoElemento) cria um novo elemento div e adiciona-o ao final do body.

Esses são apenas alguns exemplos de manipulação do DOM com JavaScript. Com a manipulação do DOM, é possível criar interações complexas e dinâmicas em uma página da web.