Document Object Model

22 november 2018
Terug naar artikelen

Wat is DOM?

Dit model is vergelijkbaar met de structuur van een boom. Klinkt gek, maar het is toch logisch! Deze manier van programmeren zorgt ervoor dat programmeurs meer hiërarchie en overzichtelijkheid in hun code kunnen creëren.

Het DOM model wordt gezien als een link tussen een HTML webpagina en programmeertalen, zoals JavaScript. Met JavaScript kan je HTML web pagina’s bereiken, aanpassen en updaten, op een georganizeerde manier. Georganizeerd omdat de HTML bestanden opgebouwd moeten zijn via het Document Object Model.

DOM als boom structuur

Deze manier van coderen/programmeren wordt ook wel vergeleken met stambomen. Dit soort bomen bestaan uit familie-leden en hun relaties gekeken naar deze stamboom. In HTML wordt elk gegeven stukje code een node genoemd. Dit kun je zien als een tak van een boom. En binnen deze stukken informatie zijn weer allemaal aftakkingen. De onderstaande afbeelding laat dit visueel zien.

Ouder – kind relaties in de DOM

In de DOM hiërarchie worden twee key elementen gebruikt, de parent node en child node. Een parent node is de dichtstbijzijnde node bij de root. Een child node is de dichtstbijzijnde node bij de parent node.