Vaak wanneer ik met mensen over mijn werk praat of wanneer ik in gesprek ben met een klant, gebruik ik onbewust vakjargon waar de ander dan niks van begrijpt. De afkorting “DOM”, is daar één van. Dit artikel is dan ook bedoeld om het één en ander uit te leggen over deze afkorting in een soort van jip-en-janneketaal. Tevens is deze uitleg ook handig voor niet-leken op dit gebied, want ik spreek met regelmaat mensen uit mijn vakgebied die de afkorting DOM in verkeerde context gebruiken of uitleggen.
De afkorting DOM staat voor “Document Object Model” en is een object-georiënteerde benadering van gestructureerde documenten zoals HTML-, XHTML- en XML-documenten. Zo, dat was in het kort de uitleg waar je alsnog vrij weinig aan hebt. Ik ben niet van plan in dit artikel heel diep en nerd-achtig in te gaan op dit onderwerp, dus wil je hier meer over lezen in artikelen met meer vlees, dan klik je hier, hier en hier.
Wat is het DOM niet?
Er zijn een aantal misvattingen over wat het DOM is, dus ik geef je eerst een opsomming van wat het DOM niet is:
- DOM is niet de HTML die je schrijft
De HTML die je schrijft wordt wel geparset door de browser om vervolgens omgezet te worden in de DOM. - DOM is niet de code die je ziet als je de “bron bekijken” of “Paginabron weergeven” functie gebruikt van je browser
De “bron bekijken” functie toont je enkel de HTML waaruit de pagina is opgebouwd en de kans is groot dat het precies dezelfde HTML is die jij geschreven hebt. Soms kan het nog iets verschillen wanneer je de HTML vanuit een andere programmeertaal genereert of wanneer de HTML is geminimaliseerd.
Wat is het DOM wel?
Nu we hebben besproken wat het niet is, komen we vanzelfsprekend aan bij de vraag: “Wat is het dan wel?” Dat gaan we nu bespreken. Wanneer je in je developer tool kijkt (van je browser) en je ziet daar een heleboel tekens staan die een soort van overeenkomen met de HTML die je geschreven hebt, dan zie je daar de visuele weergave van het DOM.
En nu zullen sommige van jullie zeggen: “Hey, dat lijkt precies op mijn HTML!” Ja, dat klopt, het is dan ook opgebouwd uit jouw HTML. In de simpele gevallen zal de visuele weergave van het DOM ook bestaan uit de HTML die je zelf hebt geschreven. Maar het is in de meeste gevallen toch niet helemaal hetzelfde…
Wanneer is het DOM anders dan de HTML
Dat is een goeie vraag om op verder te gaan. Een voorbeeld kan zijn: Je hebt een aantal fouten in je HTML zitten en de browser zal dit rechtzetten voor je. Dus je hebt bijvoorbeeld een <table> element in je HTML maar je vergeet de <tbody> element. De browser zal dit er voor je in zetten en wanneer je dan in je developer tool kijkt, zul je zien dat de <tbody> gewoon aanwezig is. Je kunt de <tbody> zelfs gewoon stijlen en benaderen met JavaScript en dat terwijl de <tbody> niet aanwezig is in je HTML.
Maar een nog beter voorbeeld is, het manipuleren van het DOM met JavaScript. Stel je eens voor, je hebt een leeg element in je HTML zoals hieronder:
[html]
<div id="leegelement"></div>
[/html]
en vervolgens heb je in je HTML een stuk JavaScript, zoals dit:
[html]<script>
var legediv = document.getElementById("leegelement");
container.innerHTML = "Jeeeej content!";
</script>[/html]
Je hoeft geen JavaScript-pro te zijn om te zien dat dit stukje code de tekst “Jeeeej content!” in de lege <div> gaat zetten. Wanneer je nu in je developer tool zou gaan kijken, zie je dat er staat:
[html]<div id="leegelement">Jeeeej content!</div>[/html]
Maar als je in je geschreven HTML kijkt, zie je alsnog alleen maar een lege <div>.
Dit is voor zover mijn artikel, met daarin een stukje uitleg over het Document Object Model. Natuurlijk zou ik nog verder kunnen gaan maar ik heb beloofd dat ik het kort en beknopt zou houden. Nogmaals, wil je nog verder in dit onderwerp duiken, dan heb ik een opsomming van links helemaal aan het begin van dit artikel.
