Waarom is de DOM nodig?

Het DOM (Document Object Model) is nodig zodat JavaScript kan communiceren met de inhoud van een webpagina en deze kan wijzigen. Het vertegenwoordigt de structuur van het HTML-document in de vorm van een boom van objecten, waarbij elke knoop overeenkomt met een element, attribuut of tekstfragment van de pagina.

Dankzij het DOM kan JavaScript:

• Toegang krijgen tot de elementen van de pagina (bijvoorbeeld via id, klasse, tag).
• De inhoud van de elementen wijzigen (tekst, HTML).
• De stijlen van de elementen aanpassen.
• De structuur van het document wijzigen (elementen toevoegen, verwijderen, verplaatsen).
• Reageren op gebeurtenissen van de gebruiker (klikken, muisaanwijzer bewegen, etc.).

Voorbeeld van het verkrijgen van een element op ID:

// Het element met id "myElement" krijgen
const myElement = document.getElementById('myElement');

Voorbeeld van het wijzigen van de tekstinhoud van een element:

// De tekstinhoud van het element wijzigen
myElement.textContent = 'Nieuwe tekst';

Zonder DOM zouden interactiviteit en dynamische wijzigingen aan webpagina's onmogelijk zijn.