IT Ordbog
Hvad er DOM (Document Object Model)?
DOM er browserens strukturerede repræsentation af en hjemmeside. Det er broen mellem HTML-koden og det, du ser på skærmen — og det er via DOM'en, at JavaScript kan ændre indhold, styling og struktur dynamisk.
Hvad er DOM?
DOM (Document Object Model) er en programmeringsgrænseflade for HTML- og XML-dokumenter. Når en browser indlæser en HTML-side, parser den koden og opretter en træstruktur af objekter — dette er DOM'en. Hvert HTML-element (div, p, h1, img) bliver et "node" i træet med egenskaber (attributter, indhold) og relationer (forælder, børn, søskende). JavaScript kan tilgå og ændre ethvert element i DOM'en, hvilket muliggør dynamisk indhold og interaktivitet.
Sådan fungerer DOM
Browseren bygger DOM-træet fra HTML-koden i en proces kaldet "parsing". Herefter kan JavaScript tilgå elementer via API'er som document.getElementById(), document.querySelector() og document.createElement(). Ændringer i DOM'en reflekteres øjeblikkeligt visuelt. Men direkte DOM-manipulation er langsom, da browseren skal recalculere layout og repaintere skærmen for hver ændring. Derfor bruger moderne frameworks som React en smartere tilgang.
Virtual DOM i React
React introducerede konceptet "Virtual DOM" — en letvægt JavaScript-kopi af den rigtige DOM. Når data ændrer sig, opdaterer React først den virtuelle DOM, sammenligner den med den forrige version (en proces kaldet "diffing"), og beregner det minimale sæt af ændringer, der skal laves i den rigtige DOM. Denne "reconciliation"-proces er markant hurtigere end direkte DOM-manipulation og er grunden til, at React-applikationer føles hurtige og responsive.
Hvorfor er DOM vigtig?
DOM er fundamentet for al dynamisk adfærd på hjemmesider. Uden DOM-manipulation ville hjemmesider være statiske dokumenter. Forståelse af DOM er vigtig for debugging, performance-optimering og tilgængelighed. DOM-manipulationer påvirker direkte performance-metrics som Interaction to Next Paint (INP) — en Core Web Vital. Effektiv DOM-håndtering, som React's Virtual DOM-tilgang, er nøglen til hurtige og responsive webapplikationer.
