Artikel

DOM — Document Object Model og JavaScript-rendering

DOM er browserens live-version af siden — JavaScript ændrer DOM dynamisk, og det er Googlebots endelige analyse-objekt efter rendering.

Sidst opdateret:

Hvad er DOM?

DOM — Document Object Model — er browserens live-repræsentation af en webside som et hierarkisk træ af objekter. Når browseren modtager HTML fra serveren, parser den koden og bygger en DOM-struktur: hvert HTML-element bliver en node i træet med egenskaber, attributter og relationer til andre nodes.

For SEO er DOM afgørende fordi Googlebot under rendering analyserer det endelige DOM — ikke nødvendigvis den rå HTML-kildekode. Det er forskellen der afgør om Googles crawler ser dit JavaScript-genererede indhold.

DOM-strukturen

Et simpelt HTML-dokument:

<!DOCTYPE html>
<html>
  <head>
    <title>Min side</title>
  </head>
  <body>
    <h1>Velkommen</h1>
    <p>Indhold her</p>
  </body>
</html>

Bliver til et DOM-træ med document som rod, html som child, og head/body som children af html. Hvert element, tekstnode og attribut er en del af træet.

DOM vs HTML-kildekode

Dette er den kritiske forskel for SEO:

HTML-kildekoden er den rå tekst serveren sender — hvad du ser med “Vis kildekode” i browseren. Den er statisk og ændrer sig ikke.

DOM’en er den levende repræsentation i browseren. JavaScript kan tilføje, fjerne og ændre nodes i DOM’en dynamisk. Det er DOM’en der bestemmer hvad brugeren faktisk ser.

Eksempel: en React-applikation sender måske blot <div id="root"></div> som kildekode. Efterdett JavaScript har kørt, kan DOM’en indeholde hundredvis af elementer med alt sidens indhold.

Hvis du har indhold der kun er synligt i DOM’en (ikke i kildekoden), kræver det at Googlebot renderer siden for at se det.

JavaScript og DOM-manipulation

JavaScript kan ændre DOM’en på utallige måder:

  • document.createElement() — tilføjer nye elementer
  • innerHTML = '...' — erstatter indhold i et element
  • classList.add() / classList.remove() — ændrer CSS-klasser
  • setAttribute() — ændrer attributter

Frameworks som React, Vue og Angular bruger alle DOM-manipulation som fundament. De bygger hele applikationens UI ved at manipulere DOM’en via JavaScript.

Virtual DOM

React og Vue bruger konceptet Virtual DOM — en let in-memory kopi af den faktiske DOM. Når noget ændres, sammenligner frameworket den nye virtual DOM med den forrige (diffing), og opdaterer kun de dele af den rigtige DOM der faktisk ændrede sig.

Virtual DOM er en performance-optimering for JavaScript-frameworks, men ændrer ikke på SEO-problemstillingen: indholdet er stadig JavaScript-genereret og kræver rendering.

Hvad Googlebot ser

Googlebots rendering-proces foregår i to faser:

  1. Crawl uden rendering: Googlebot henter HTML-kildekoden. Indhold synligt direkte i kildekoden indekseres straks.

  2. Rendering: Googlebot placerer siden i en rendering-kø, kører JavaScript og analyserer det endelige DOM. JavaScript-genereret indhold indekseres herefter.

Rendering kan ske sekunder til dage efter det første crawl. I mellemtiden kan indhold der kun eksisterer i DOM’en, mangle fra Google indekset.

DOM-størrelse og performance

En for stor DOM er et performance-problem. Google anbefaler:

  • Maksimalt 1.500 nodes i alt
  • Maksimal dybde på 32 niveauer
  • Maksimalt 60 child nodes under ét parent-element

En oppustet DOM (DOM bloat) forlænger renderingstid, øger hukommelsesbrug og forsinker JavaScript-eksekvering — alt sammen negativt for Core Web Vitals.

DOM og SEO — den praktiske konsekvens

Vil du sikre at Googlebot ser dit indhold, er den sikreste løsning at indholdet er synligt i HTML-kildekoden — ikke kun i DOM’en efter JavaScript-rendering. Det opnås ved server-side rendering (SSR) eller static site generation (SSG), hvor HTML genereres på serveren og sendes færdig til browseren.

Kan jeg tjekke hvad Googlebot ser i DOM’en? Google Search Consoles URL Inspection Tool viser “Rendered HTML” — det er HTML-outputtet af Googlebots rendering og svarer til DOM’en efter JavaScript-eksekvering.

Er DOM og HTML det samme? Nej. HTML er kildekoden. DOM er browserens live-repræsentation som kan ændres af JavaScript. På sider med meget JavaScript kan de to være meget forskellige.

Hvad er DOM-manipulation? DOM-manipulation er JavaScript-kode der tilføjer, ændrer eller fjerner elementer i DOM-træet dynamisk — typisk som reaktion på brugerinteraktion eller data fra en API.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.

Del af: JavaScript og rendering — Scripts, DOM og CSR vs SSR →

Andre artikler i samme emne

Relaterede begreber

Emne JavaScript og rendering — Scripts, DOM og CSR vs SSR JavaScript er SEOs største rendering-udfordring — forstå CSR vs SSR, DOM, lazy loading og hvad Googlebot faktisk ser. Artikel Kildekode — Hvad er kildekode og hvad ser Googlebot? Kildekode er rå HTML som browseren modtager — men Googlebot ser i mange tilfælde det renderede DOM, ikke blot kildekoden. Artikel Rendering — Hvad Googlebot ser efter JavaScript-rendering Rendering er Googles oversættelse af kode til indhold — JavaScript-rendering sker i en separat kø og kan forsinke indeksering med dage. Artikel JavaScript — Hvad er JavaScript og hvad betyder det for SEO? JavaScript tilføjer interaktivitet — men JS-tunge sider kræver rendering, og det er SEOs største tekniske udfordring. Artikel Client-side rendering — CSR og SEO-udfordringer CSR genererer sidernes HTML i browseren — det er SEOs sværeste rendering-udfordring, da Googlebot skal vente på rendering. Hovedguide Kode — Webkode og teknisk SEO Komplet guide til webkode og teknisk SEO — fra HTML-struktur og metadata til crawling, structured data og Core Web Vitals.

Placering i ordbogen

Kode — Webkode og teknisk SEO
JavaScript og rendering — Scripts, DOM og CSR vs SSR
DOM — Document Object Model og JavaScript-rendering