Bij het bouwen van een website kom je vaak de term DOM tegen - wat staat voor Document Object Model. De DOM is een programmeerinterface die een webpagina representeert als een gestructureerde boom van nodes, waarbij elke node correleert met een HTML-element (zoals een heading-tag, paragraaf en link). Dit maakt programmatische toegang mogelijk om content op een pagina dynamisch te navigeren en aan te passen.
Wat is de DOM?
Wanneer je browser de HTML-code laadt, parseert het deze en bouwt een boom van objecten gemaakt van elementen op de pagina. Het element bovenaan zou de root van de boom zijn, en daaronder vind je de en nodes, en daarbinnen hun child-objecten. De DOM wordt vaak beschreven als een gestandaardiseerde API voor HTML-content. Als een programma de content van je pagina moet updaten, zou het met de DOM communiceren.
Het is ook belangrijk te vermelden dat de DOM zelf taalneutraal is. Het is geen onderdeel van JavaScript, maar JavaScript is toevallig wel de beste manier om ermee te interacteren.
DOM achter de schermen
Wanneer een browser een website laadt, wordt de HTML geparsed naar een DOM-boom en de CSS naar de CSSOM (CSS Object Model), die alle stijlregels van je objecten representeert. Eenmaal voltooid, combineert de browser de DOM en CSSOM om uit te zoeken hoe nodes eruit moeten zien en waar ze moeten verschijnen, waarbij de exacte positie en grootte van elk DOM-element wordt berekend.
De DOM is een live, dynamische structuur, dus JavaScript en andere code kunnen nodes wijzigen nadat een pagina is geladen, waarbij de site direct wordt bijgewerkt zonder dat een herlaadactie nodig is.
Interacteren met de DOM
De browser stelt de DOM beschikbaar via het document object, dat JavaScript vervolgens kan gebruiken om ermee te interacteren. Met de DOM API kun je verschillende acties uitvoeren om een statische pagina dynamischer en interactiever te maken. Enkele voorbeelden:
- Elementen selecteren door
document.getElementByIdte doen, wat de button of het element voor die ID retourneert - Content op een pagina lezen of wijzigen door de
element.textContentofelement.innerHTMLte veranderen - Dynamisch CSS toepassen of wijzigen voor een element door de stijleigenschappen te veranderen (bijvoorbeeld
element.style.backgroundColor = "yellow"om iets geel te maken) - Elementen toevoegen of verwijderen op een pagina door
document.createElementofelement.removeChildte doen
Waarom de DOM belangrijk is
Zonder de DOM zouden websites zoals we ze kennen niet bestaan! De DOM maakt alles mogelijk, van een eenvoudig webscript tot complexe applicaties, door dynamische content mogelijk te maken, en het is echt de brug tussen simpele HTML en JavaScript. Door te begrijpen wat de DOM is en hoe het werkt, kunnen ontwikkelaars het gebruiken in hun eigen sites om boeiende features te bouwen voor hun gebruikers.
