Kort samengevat: wat is de DOM
- Het DOM (Document Object Model) is de levende, gestructureerde representatie van een webpagina door de browser als een objectboom die JavaScript kan lezen en wijzigen.
- Elk script dat je pagina laadt (first-party bundles, tag manager, analytics, chat, ad-tech) heeft standaard volledige lees- en schrijftoegang tot hetzelfde DOM. Daarom kan een gecompromitteerd third-party-script een loginformulier of checkout-veld lezen.
- Client-side security monitort wat scripts daadwerkelijk met het DOM doen in echte gebruikerssessies, de enige plek waar de PCI DSS 4.0.1 §6.4.3 script-inventaris en §11.6.1 tamperdetectie echt gevalideerd kunnen worden.
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 is een gestandaardiseerde API voor HTML-content. Als een programma de content van je pagina moet updaten, zou het met de DOM communiceren.
De DOM zelf is taalneutraal. Het is geen onderdeel van JavaScript, maar JavaScript is toevallig wel de beste manier om ermee te interacteren.
Zie het op je eigen site
Als je geeft om wat er echt in de browser draait (niet alleen wat je server verstuurde), heb je zicht nodig op elke DOM-mutatie die je third-party-scripts maken. cside monitort client-side scriptgedrag in elke echte gebruikerssessie in realtime. Gratis niveau voor de basislijn.
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. Zodra dit voltooid is, combineert de browser de DOM en CSSOM om te bepalen hoe nodes eruit moeten zien, waar ze moeten verschijnen, en hun exacte positie en grootte.
De DOM is een levende, dynamische structuur, dus JavaScript en andere code kunnen nodes wijzigen nadat een pagina is geladen. De site wordt direct 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.getElementById` te doen, wat de button of het element voor die ID retourneert
- Content op een pagina lezen of wijzigen door `element.textContent` of `element.innerHTML` te 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.createElement` of `element.removeChild` te doen
Waarom de DOM belangrijk is
Zonder de DOM zouden dynamische websites niet mogelijk zijn. Het stelt alles van een eenvoudig script tot een complexe applicatie in staat om paginacontent te lezen en te wijzigen, en het is de belangrijkste interface tussen HTML en JavaScript.
