Wat is de DOM?
De DOM is de versie van je pagina zoals de browser hem in zijn geheugen heeft staan. Een boomstructuur van alle elementen.
De browser bouwt hem op uit je HTML. Daarna kunnen scripts hem aanpassen, en wat er dan staat is wat jij ziet.
Je bekijkt dus nooit je HTML op je scherm, maar altijd de DOM.
Hoe hij ontstaat
De browser leest je HTML van boven naar beneden en maakt er een boom van: een pagina met een kop erin, met een titel erin, enzovoort.
Die boom is het model waar alles daarna mee werkt: je opmaak, je scripts en voorleessoftware. Meer daarover lees je bij html.
Wat scripts ermee doen
Ze voegen elementen toe, halen ze weg of veranderen ze. Een menu dat opengaat, een melding die verschijnt, een formulier dat een foutregel toont.
Dat gebeurt allemaal in de DOM, niet in je HTML-bestand.
Waarom je dit moet weten
Omdat het verklaart waarom de broncode van een pagina er anders uitziet dan wat je op je scherm ziet.
En omdat het verklaart waarom een pagina traag kan aanvoelen terwijl hij klein is. Meer daarover lees je bij waarom te veel DOM-manipulatie je site vertraagt.
Mijn vuistregels
- Wat je in de inspectiefunctie ziet, is de DOM; wat je bij “broncode weergeven” ziet, is je HTML.
- Houd je structuur ondiep; diepe bomen zijn traag en onoverzichtelijk.
- Laat scripts zo min mogelijk verbouwen na het laden.
- Test wat er staat zonder JavaScript als je vindbaarheid belangrijk is.
Die eerste voorkomt het meeste misverstand bij het zoeken naar een fout.
Wat het niet is
Geen programmeertaal en geen bestand. Het is een model in het geheugen van de browser, dat verdwijnt zodra je de pagina sluit.
Ook niet hetzelfde als je opmaak; die legt alleen vast hoe de elementen eruitzien. Meer daarover lees je bij css.
Wie er nog meer mee werkt
Voorleessoftware leest de DOM, niet je bestand. Daarom werken toegankelijkheidsattributen die je met een script toevoegt gewoon.
Meer daarover lees je bij aria.