Para que serve o Document Object Model (DOM)?

O DOM permite que os programas (por exemplo, JavaScript) acedam ao conteúdo, estrutura e estilos de documentos web (HTML, XML, SVG) e os modifiquem. É uma API que representa o documento como uma árvore estruturada de nós.

Principais funções do DOM:

• Representação do documento: Converte o código fonte do documento numa representação de objetos.
• Acesso: Permite encontrar e selecionar elementos do documento.
• Manipulação: Permite alterar o conteúdo, atributos e estilos dos elementos, bem como adicionar ou remover elementos.
• Manipulação de eventos: Permite associar manipuladores a eventos (clique, passar o rato, etc.) nos elementos do documento.

Exemplo de trabalho com DOM em JavaScript:

// Obter elemento pelo seu id
const element = document.getElementById('myElement');

// Alterar o seu texto
element.textContent = 'Novo texto';

// Adicionar uma nova classe
element.classList.add('new-class');

// Criar um novo elemento
const newDiv = document.createElement('div');
newDiv.textContent = 'Olá!';

// Adicionar o novo elemento ao corpo do documento
document.body.appendChild(newDiv);