DOM

Hva er DOM?

DOM (Document Object Model) er nettleserens representasjon av HTML-siden din som et tre av objekter. Når nettleseren laster HTML, bygger den et DOM-tre som JavaScript kan lese og endre.

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p

Les mer

DOM er et stort tema. Se DOM-referansen for en komplett oversikt over metoder for å velge, endre, opprette og fjerne elementer.

Når du endrer noe i DOM-en med JavaScript, oppdateres nettsiden umiddelbart.

Velge elementer

For å endre noe på siden, må du først finne elementet. Du bruker CSS-selektorer for å peke på riktig element:

// Velg ett element med ID
let tittel = document.getElementById("tittel");

// Velg ett element med CSS-selektor
let knapp = document.querySelector(".min-knapp");

// Velg flere elementer
let avsnitt = document.querySelectorAll("p");

Tip

Bruk querySelector og querySelectorAll - de bruker CSS-selektorer du allerede kan!

Endre innhold

let tittel = document.getElementById("tittel");

tittel.textContent = "Ny tittel";           // Endre tekst
tittel.innerHTML = "<em>Ny tittel</em>";    // Endre HTML

Endre stil

let tittel = document.getElementById("tittel");

tittel.style.color = "blue";
tittel.style.fontSize = "24px";
tittel.classList.add("aktiv");       // Legg til CSS-klasse
tittel.classList.remove("skjult");   // Fjern CSS-klasse
tittel.classList.toggle("valgt");    // Legg til/fjern

Eksempel

index.htmlscript.js

<!DOCTYPE html>
<html lang="no">
<head>
    <title>DOM Demo</title>
</head>
<body>
    <h1 id="tittel">Velkommen</h1>
    <button id="endre-knapp">Endre tittel</button>
    <script src="script.js"></script>
</body>
</html>

let knapp = document.getElementById("endre-knapp");
let tittel = document.getElementById("tittel");

knapp.addEventListener("click", function() {
    tittel.textContent = "Tittelen er endret!";
    tittel.style.color = "green";
});