Het Document Object Model (DOM) is een programmeerbare representatie van de structuur van een webpagina. Wanneer een browser een HTML- of XML-bestand laadt, wordt dit bestand omgezet in een boomstructuur die het DOM vormt. Deze structuur maakt het mogelijk om via programmeertalen, zoals JavaScript, onderdelen van de pagina te benaderen en te manipuleren.
In het DOM wordt elk onderdeel van een webpagina, zoals koppen, alinea’s, links, knoppen en afbeeldingen, voorgesteld als een node (knooppunt) in de boom. De hele webpagina wordt gezien als een hiërarchie van geneste elementen, beginnend bij het <html>-element als de wortel van de boom.
Hoewel HTML de bron code is waarmee een webpagina wordt opgebouwd, is het DOM de versie die door de browser wordt gelezen, geïnterpreteerd en gebruikt tijdens de uitvoering. Deze DOM-structuur kan live worden aangepast, dus zelfs nadat de pagina geladen is, kan JavaScript elementen toevoegen, wijzigen of verwijderen. Dit is de basis voor interactieve webpagina’s.
Bijvoorbeeld:
<!-- HTML-code -->
<p id="voorbeeld">Hallo wereld!</p>Via JavaScript kan deze tekst live worden aangepast:
document.getElementById("voorbeeld").textContent = "Tekst aangepast via DOM";In dit voorbeeld wordt niet de originele HTML aangepast, maar de DOM-weergave ervan in het geheugen van de browser.
Het Document Object Model is essentieel voor moderne webontwikkeling, omdat het de brug vormt tussen statische HTML-code en dynamisch gedrag op een website.
Dankzij het DOM kunnen ontwikkelaars onder andere:
Formulieren valideren vóór verzending
Inhoud inladen zonder de pagina te herladen (AJAX)
Gebruikersinteracties verwerken, zoals klikken of typen
Pagina’s aanpassen op basis van gebruikersdata
Kortom: het DOM stelt ontwikkelaars in staat om webpagina’s interactief en responsief te maken, wat leidt tot een betere gebruikerservaring.
Het Document Object Model is ontstaan uit de behoefte om webpagina’s interactiever te maken en dynamisch aan te passen via scripts. In de beginjaren van het web was HTML vooral bedoeld om documenten te tonen, niet om ermee te interacteren. Dat veranderde toen browsers scriptingtalen, zoals JavaScript, begonnen te ondersteunen.
In de jaren ‘90 ontwikkelden verschillende browsermakers hun eigen manieren om de inhoud van webpagina’s via JavaScript te manipuleren. Dit leidde tot grote verschillen in hoe het DOM werkte tussen bijvoorbeeld Netscape Navigator en Internet Explorer. Voor ontwikkelaars betekende dit extra werk: scripts moesten worden aangepast aan elke browser.
Om die fragmentatie tegen te gaan, werd er behoefte aan standaardisatie. In 1998 nam het World Wide Web Consortium (W3C) het initiatief om het DOM te definiëren als een platform- en taalonafhankelijke interface. Zo ontstond de eerste officiële DOM-specificatie: DOM Level 1.
De standaardisatie van het DOM verliep in stappen, waarbij elke versie (of "Level") nieuwe mogelijkheden toevoegde:
| DOM-level | Jaar | Belangrijkste toevoegingen |
|---|---|---|
| Level 1 | 1998 | Basisstructuur: document, elementen, attributen |
| Level 2 | 2000 | Stijl (CSS), events, navigatie tussen nodes |
| Level 3 | 2004 | Load/save functionaliteit, ondersteuning voor XML namespaces |
| Living Standard | Doorlopend | Continue updates via de WHATWG |
Sinds 2015 is de ontwikkeling overgenomen door de WHATWG (Web Hypertext Application Technology Working Group). In plaats van losse versies te publiceren, hanteren zij een living standard. Dat betekent dat de specificatie voortdurend wordt bijgewerkt, in lijn met hoe moderne browsers het DOM implementeren.
De belangrijkste partijen die bijdragen aan de standaardisatie van het DOM zijn:
W3C (World Wide Web Consortium): oorspronkelijke beheerder van de DOM-specificaties.
WHATWG: verantwoordelijk voor de huidige doorlopende standaard.
Browserontwikkelaars: zoals Google (Chrome), Mozilla (Firefox), Apple (Safari) en Microsoft (Edge), die de specificaties implementeren en actief meeschrijven aan de standaard.
Door samenwerking tussen deze partijen blijft het DOM compatibel en bruikbaar in alle moderne browsers.
Het Document Object Model wordt intern weergegeven als een hiërarchische boomstructuur, ook wel een DOM tree genoemd. Elk onderdeel van de webpagina, zoals een kop, afbeelding of alinea, is een knooppunt (node) in deze boom. Samen vormen ze de volledige structuur van het document, beginnend bij de root node (<html>).
De DOM-boom lijkt op een stamboom: er is een ouder-kindrelatie tussen elementen. De bovenste laag is het document-object, gevolgd door het <html>-element. Daaronder vind je <head> en <body>, die op hun beurt weer andere elementen bevatten zoals <h1>, <p>, <div> enzovoort.
Een visuele weergave:
document
└── html
├── head
│ └── title
└── body
├── h1
└── pIeder element is een node. Deze nodes kunnen ook zelf weer kinderen hebben, waardoor er een boomstructuur ontstaat.
De DOM maakt onderscheid tussen verschillende soorten nodes. De drie belangrijkste zijn:
Element nodes
Dit zijn HTML-elementen zoals <div>, <p>, <ul>, <img>, enz. Ze vormen de basisstructuur van de pagina.
Text nodes
Elk stuk tekst in een element (zoals een paragraaf of koptekst) is een aparte node. Zelfs witruimte wordt als tekstnode gezien.
Attribute nodes
Attributen zoals class, id of src zijn ook toegankelijk via de DOM. In moderne browsers worden ze vaak behandeld als properties van een element.
Een voorbeeld:
<p id="intro">Welkom!</p>In de DOM ziet dit eruit als:
Een element node: <p>
Een attribute node: id="intro"
Een text node: "Welkom!"
De boomstructuur maakt het mogelijk om door het document te navigeren met relaties zoals:
parentNode – verwijst naar de ouder van een node
childNodes – geeft een lijst van alle kinderen van een node
firstChild / lastChild – eerste of laatste kindnode
nextSibling / previousSibling – naastgelegen nodes op hetzelfde niveau
Deze hiërarchie is belangrijk voor het manipuleren van de DOM met JavaScript. Door slim te navigeren en selecties te maken, kunnen ontwikkelaars specifieke onderdelen van een pagina aanpassen.
JavaScript is de belangrijkste programmeertaal om het Document Object Model (DOM) te manipuleren. Dankzij deze combinatie kunnen ontwikkelaars webpagina’s dynamisch update zonder dat de pagina opnieuw geladen hoeft te worden. Dit vormt de basis van interactieve websites.
Wanneer een HTML-pagina wordt geladen, maakt de browser automatisch een DOM-versie aan in het geheugen. JavaScript kan deze structuur gebruiken om elementen te lezen, wijzigen, toevoegen of verwijderen. Dit gebeurt via het document-object, dat de toegangspoort is tot de gehele DOM.
Voorbeelden van veelgebruikte bewerkingen:
// Een element selecteren op ID
const titel = document.getElementById("mijnTitel");
// Tekstinhoud aanpassen
titel.textContent = "Welkom op mijn site";
// Een element verbergen
titel.style.display = "none";Deze acties passen niet de originele HTML aan, maar de live-weergave in de browser.
Er zijn verschillende manieren om elementen te selecteren in de DOM:
getElementById("id") – selecteert één element met een specifieke ID
getElementsByClassName("class") – selecteert meerdere elementen met dezelfde klasse
querySelector("selector") – selecteert het eerste element dat past bij een CSS-selector
querySelectorAll("selector") – selecteert alle elementen die passen bij een CSS-selector
Voorbeeld:
const buttons = document.querySelectorAll(".cta-button");Met JavaScript kun je eenvoudig inhoud aanpassen:
document.querySelector("h1").textContent = "Nieuwe titel";
document.querySelector("p").innerHTML = "<strong>Vetgedrukte tekst</strong>";Het verschil tussen textContent en innerHTML is dat textContent alleen tekst toevoegt, terwijl innerHTML HTML-elementen interpreteert.
Nieuwe elementen maken en toevoegen aan de DOM kan met deze stappen:
const nieuwElement = document.createElement("li");
nieuwElement.textContent = "Nieuw item";
document.querySelector("ul").appendChild(nieuwElement);En verwijderen:
const teVerwijderen = document.getElementById("oudeItem");
teVerwijderen.remove();JavaScript maakt het ook mogelijk om te reageren op gebruikersinteracties via event listeners:
document.querySelector("button").addEventListener("click", function () {
alert("Knop geklikt!");
});Hierdoor worden webpagina’s niet alleen visueel aangepast, maar ook functioneel responsief.
Het Document Object Model is opgebouwd rond een set gestandaardiseerde interfaces, de blauwdrukken voor de objecten waarmee je werkt in de DOM. Dankzij deze interfaces kun je als ontwikkelaar op een consistente manier elementen en eigenschappen manipuleren, ongeacht de browser.
In programmeertaaltermen is een interface een beschrijving van de eigenschappen en methodes die een object moet hebben. In het DOM definieert elke interface hoe een bepaald type node zich gedraagt.
Bijvoorbeeld:
De Node-interface is de basis voor alle DOM-objecten.
De Element-interface breidt Node uit en bevat eigenschappen specifiek voor HTML-elementen.
De HTMLElement-interface gaat nog een stap verder en voegt functionaliteit toe die specifiek is voor HTML, zoals className, id en style.
JavaScript-objecten in de DOM volgen deze interfaces, wat betekent dat een <div>-element bijvoorbeeld automatisch toegang heeft tot alle methodes van Node, Element én HTMLElement.
Hier zijn enkele van de belangrijkste DOM-interfaces:
| Interface | Beschrijving |
|---|---|
| Node | Basisklasse voor elk object in de DOM-boom (elementen, tekst, attributen, etc.) |
| Element | Vertegenwoordigt een HTML- of XML-element |
| HTMLElement | Extensie van Element met HTML-specifieke functionaliteit |
| Document | Vertegenwoordigt het hele document. Via dit object begint elke DOM-interactie |
| Event | Wordt gebruikt om gebruikersinteracties zoals klikken of toetsen vast te leggen |
Voorbeeld: wanneer je deze regel uitvoert...
const knop = document.querySelector("button");...dan is knop een object dat de HTMLElement-interface gebruikt, inclusief toegang tot methodes zoals addEventListener() of eigenschappen zoals textContent.
Het DOM is niet beperkt tot HTML. Ook andere types documentstructuren, zoals SVG (Scalable Vector Graphics), hebben hun eigen DOM-interfaces. Dit betekent dat bepaalde eigenschappen of methodes specifiek zijn voor SVG-elementen.
Bijvoorbeeld:
const cirkel = document.querySelector("circle");
cirkel.setAttribute("r", 40); // SVG-specifieke eigenschapHoewel HTML- en SVG-elementen beide via het DOM toegankelijk zijn, gebruiken ze deels verschillende interfaces.
De structuur van DOM-objecten en hun interfaces maakt het mogelijk om op een betrouwbare, gestandaardiseerde manier met webpagina’s te werken, essentieel voor moderne frontend ontwikkeling.
Het Document Object Model is geen theoretisch concept dat alleen voor ontwikkelaarsdocumentatie bedoeld is, het is een actief onderdeel van elke moderne webbrowser. Dankzij het DOM kunnen webpagina’s reageren op gebruikersacties, content dynamisch wijzigen en visueel aanpassen zonder een volledige herlaad.
De meeste interacties die je als gebruiker ervaart op een website worden mogelijk gemaakt door DOM-manipulatie. Denk aan:
Dropdownmenu’s die openen bij een klik
Formulieren met realtime validatie
Live zoekresultaten terwijl je typt
Pop-ups en modals die verschijnen bij acties
Dynamisch inladen van content via AJAX of Fetch API
Dit alles gebeurt met behulp van JavaScript die de DOM leest en aanpast op basis van gebeurtenissen of data.
Hoewel moderne browsers een krachtige native DOM-API bieden, kiezen veel ontwikkelaars voor library’s die het werken met de DOM makkelijker maken. De bekendste is:
jQuery
jQuery maakte DOM-manipulatie eenvoudiger met kortere syntax en bredere compatibiliteit. Tegenwoordig is de noodzaak van jQuery kleiner, maar veel bestaande projecten gebruiken het nog.
Voorbeeld:
// Native DOM
document.getElementById("titel").textContent = "Hallo";
// jQuery
$("#titel").text("Hallo");Andere populaire tools of frameworks die gebruik maken van het DOM, maar op een hoger abstractieniveau werken:
React (via de Virtual DOM)
Vue
Angular
Deze frameworks beheren zelf het DOM en zorgen voor efficiënte updates op basis van state of datawijzigingen.
Alle grote browsers, zoals Chrome, Firefox, Safari en Edge, ondersteunen het DOM volledig volgens de specificaties van de living standard. Ze gebruiken layout engines zoals:
| Browser | Engine |
|---|---|
| Chrome | Blink |
| Firefox | Gecko |
| Safari | WebKit |
| Edge | Blink |
Deze engines zorgen ervoor dat HTML wordt omgezet naar een renderbare visuele weergave én een bruikbare DOM-boom. Dankzij standaardisatie is de werking van de DOM in deze browsers grotendeels gelijk, al kunnen er kleine verschillen zijn in timing of performance.
Om het gebruik van het Document Object Model in de praktijk te verduidelijken, volgen hieronder twee veelvoorkomende scenario’s: het aanpassen van tekstinhoud en het toevoegen van een nieuw element aan de DOM. Elk voorbeeld bevat bijbehorende HTML en JavaScript, zodat je het direct zelf kunt testen of toepassen.
In dit voorbeeld wordt een koptekst op een pagina dynamisch aangepast met JavaScript.
HTML
<h1 id="hoofdtitel">Welkom op mijn website</h1>JavaScript
const titel = document.getElementById("hoofdtitel");
titel.textContent = "Tekst aangepast via JavaScript";Resultaat
De oorspronkelijke tekst "Welkom op mijn website" verandert direct naar "Tekst aangepast via JavaScript" zodra de JavaScript wordt uitgevoerd.
Hier voegen we een nieuw lijstitem toe aan een bestaande ongeordende lijst (<ul>).
HTML
<ul id="boodschappenlijst">
<li>Brood</li>
<li>Melk</li>
</ul>JavaScript
const lijst = document.getElementById("boodschappenlijst");
const nieuwItem = document.createElement("li");
nieuwItem.textContent = "Eieren";
lijst.appendChild(nieuwItem);Resultaat
De lijst bevat nu een extra item:
Brood
Melk
Eieren
Deze voorbeelden laten zien hoe krachtig en toegankelijk DOM-manipulatie is. Met slechts een paar regels JavaScript kun je webpagina’s dynamisch en interactief maken.
Het Document Object Model vormt de ruggengraat van elke moderne webpagina. Zonder het DOM zou het web statisch zijn, zonder interactie, responsiviteit of dynamiek. Doordat browsers HTML en XML omzetten in een gestructureerde boom van nodes, kunnen ontwikkelaars eenvoudig elementen selecteren, wijzigen, toevoegen of verwijderen en dat alles in realtime.
Het DOM maakt het mogelijk om gebruikerservaringen te creëren die intuïtief, snel en rijk zijn. Van simpele aanpassingen zoals het wijzigen van tekst, tot het bouwen van volledige single-page applications met frameworks zoals React, alles begint met de DOM.
Voor iedereen die websites ontwikkelt, is kennis van het DOM essentieel. Het vormt de basis voor interactie tussen code en content en is onmisbaar in front-end ontwikkeling.
Het Document Object Model (DOM) is een gestructureerde weergave van een webpagina in de vorm van een boomstructuur van nodes. Het stelt programmeurs in staat om met behulp van JavaScript pagina-inhoud dynamisch te lezen en te wijzigen.
HTML is de opmaaktaal die in de broncode van een pagina staat. De DOM is de live representatie van die HTML in het geheugen van de browser. JavaScript werkt met deze DOM, niet direct met de HTML.
De drie belangrijkste onderdelen van het DOM zijn elementknooppunten, tekstknooppunten en attribuutknooppunten. Elementknooppunten vertegenwoordigen HTML-elementen zoals <div> of <p>, tekstknooppunten bevatten de eigenlijke tekst in die elementen en attribuutknooppunten bevatten aanvullende informatie zoals id-, klasse- of src-waarden.
