Por que é necessário o DOM?

O DOM (Modelo de Objeto do Documento) é necessário para que o JavaScript possa interagir com o conteúdo de uma página web e modificá-lo. Ele representa a estrutura do documento HTML na forma de uma árvore de objetos, onde cada nó corresponde a um elemento, atributo ou fragmento de texto da página.

Graças ao DOM, o JavaScript pode:

• Aceder aos elementos da página (por exemplo, por id, classe, tag).
• Alterar o conteúdo dos elementos (texto, HTML).
• Alterar os estilos dos elementos.
• Alterar a estrutura do documento (adicionar, remover, mover elementos).
• Reagir a eventos do utilizador (cliques, passar o rato, etc.).

Exemplo de obtenção de um elemento por ID:

// Obter o elemento com id "myElement"
const myElement = document.getElementById('myElement');

Exemplo de alteração do conteúdo de texto de um elemento:

// Alterar o conteúdo de texto do elemento
myElement.textContent = 'Novo texto';

Sem o DOM, a interatividade e a alteração dinâmica de páginas web seriam impossíveis.