Hva er DOM-en?

Når du åpner en nettside, ser du tekst, bilder og knapper. Det du ser resultatet av at nettleseren har kombinert HTML, CSS og JavaScript. Etter at siden er lastet kan du endre den med JavaScript, men hva skjer egenglit når du endrer på noe, hvordan kan nettleseren oppdatere siden?

Denne siden gir en forklaring på hva som skjer når nettsiden lastes inn, hvordan den endres og hva DOM er. Målet er at du skal forstå hva det er, hvordan nettleseren bygger det fra HTML filen din og hvordan JavaScript kan endre det som vises på skjermen.

Nettleseren bygger et tre

Når du åpner en HTML-fil i nettleseren lastes siden inn i minnet. Dette gjøres ved at nettleseren leser koden din fra topp til bunn og bygger en modell av den. Det er denne modellen som rendres og vises på skjermen din.

Visualiseringen nedenfor er en steg for steg gjennomgang av hva som skjer, klikk igjennom den for å se hva som skjer:

For hver tag nettleseren finner, lager den et objekt i minnet – en node. Disse nodene kobles sammen i en trestruktur: foreldre, barn og søsken. Tekst mellom tagger (som «Si hei!») lagres som en egenskap (textContent) på objektet. Attributter som id blir også egenskaper.

Når nettleseren er ferdig med å lese filen, har den bygd et komplett tre. Fra dette øyeblikket er det treet i minnet – ikke filen din – som bestemmer hva du ser på skjermen.

document
└── html
    ├── head
    │   └── title ─── textContent: "Hilsen"
    └── body
        ├── h1 ─── textContent: "Si hei!"
        ├── input ─── id: "navn"
        ├── button ─── id: "hils-btn", textContent: "Hils"
        └── p ─── id: "melding"

<html>
  <body>
    <h2>Handleliste</h2>
    <ul>
      <li>Melk</li>
      <li>Brød</li>
    </ul>
  </body>
</html>

Noder er objekter med egenskaper

Hver node i treet er et JavaScript-objekt. Et objekt er en «pakke» med informasjon – det har egenskaper som beskriver det. (Vil du vite mer om objekter? Se Objekter.)

En h1-node har for eksempel disse egenskapene – hold over en rad for å lære mer:

Nettleseren lager disse objektene automatisk fra HTML-en din. Du trenger ikke skrive dem selv – de finnes i minnet når siden har lastet.

Det betyr at når du bruker getElementById eller querySelector, ber du JavaScript om å lete gjennom disse objektene og gi deg tilbake det som matcher.

JavaScript endrer treet, ikke filen

Du har brukt getElementById og textContent mange ganger. Men hva skjer egentlig?

document.getElementById('melding') søker gjennom treet – ikke gjennom HTML-filen. Den sjekker hvert elements id-egenskap til den finner en match, og returnerer det objektet.

DOM – Document Object Model

Treet har et navn: Document Object Model, eller DOM-en.

• Document – fordi det representerer dokumentet ditt
• Object – fordi hver node er et objekt med egenskaper
• Model – fordi det er nettleserens arbeidsmodell av siden, ikke selve filen

Når noen sier «endre DOM-en», mener de: endre egenskaper på objekter i dette treet.

Variabler er lapper, ikke bokser

Når du skriver const message = document.getElementById('melding'), skjer det to ting:

1. JavaScript søker gjennom DOM-treet og finner noden med riktig id
2. Variabelen message festes som en lapp på det objektet

Variabelen peker på objektet – den inneholder det ikke. Tenk på det som en navnelapp du fester på noe, slik at du kan finne det igjen.

message.textContent betyr: følg lappen message til objektet den peker på, og les egenskapen textContent på det objektet.

Egenskapen endres, filen endres ikke

Hva skjer når du endrer en egenskap?

message.textContent = 'Hei, Ola!' endrer en egenskap på et objekt i minnet. Nettleseren ser at DOM-treet har endret seg og oppdaterer skjermen. Men HTML-filen din? Helt uendret. Linje 10 viser fortsatt <p id="melding"></p> – tomt.

JavaScript rørte aldri filen din. Den endret treet.

Se det selv: DevTools

Trestrukturen du har sett i visualiseringene over er ikke bare en illustrasjon – du kan se den selv i nettleserens utviklerverktøy.

Elements-panelet viser DOM-treet slik det er akkurat nå – med alle JavaScript-endringer. Vis kildekode (Ctrl+U) viser den originale HTML-filen – uten endringer.

Slik åpner du det:

1. Høyreklikk på et element på siden → Inspiser
2. Eller trykk F12 og velg Elements-fanen
3. Du ser den samme trestrukturen som i visualiseringene – bare i et annet format

Se Utviklerverktøy-referansen for mer om hva du kan gjøre i DevTools.

Bygge nye elementer

Hittil har vi funnet og endret noder som allerede finnes i treet. Men du kan også lage helt nye noder – slik du gjør i to-do-appen med createElement.

Hva skjer egentlig når du lager et nytt element?

createElement lager et nytt objekt i minnet – men det er ikke en del av DOM-en. Det er frakoblet. Du kan sette egenskaper på det (som textContent), men det er ikke synlig på nettsiden ennå.

Koble det til DOM-en

Først setter du sammen elementene. Så kobler du det ferdige elementet til treet med appendChild.

Tre steg:

1. Opprett – createElement lager nye objekter (frakoblet fra DOM-en)
2. Sett sammen – appendChild kobler dem til hverandre (fortsatt frakoblet)
3. Koble til – appendChild kobler det ferdige treet til DOM-en (nå synlig!)

// 1. Opprett
const newTask = document.createElement('li');
const taskText = document.createElement('span');
const deleteBtn = document.createElement('button');

// 2. Sett egenskaper
taskText.textContent = 'Handle mat';
deleteBtn.textContent = 'X';

// 3. Sett sammen
newTask.appendChild(taskText);
newTask.appendChild(deleteBtn);

// 4. Koble til DOM-en
taskList.appendChild(newTask);

Først når det nye elementet er koblet til DOM-treet, tegner nettleseren det på skjermen.

const nyP = document.createElement('p');
nyP.textContent = 'Jeg ble laget med JavaScript!';
nyP.style.color = 'green';
document.body.appendChild(nyP);

Oppsummering

• Nettleseren bygger et tre av objekter (DOM-en) fra HTML-filen din
• Hver node er et objekt med egenskaper som textContent, id og classList
• JavaScript finner, endrer og lager noder i treet – aldri i filen
• Du kan se DOM-treet i DevTools (Elements-panelet)
• Nye elementer lages med createElement, settes sammen, og kobles til med appendChild

Nå som du forstår hva DOM-en er, la oss se på alle måtene du kan jobbe med den: Jobbe med DOM-en →