Når du arbejder med webudvikling, er det sjældent nok blot at vise statisk HTML. De fleste moderne websites kræver dynamisk indhold – elementer, der ændrer sig, reagerer på brugerens handlinger eller opdateres uden at siden genindlæses. Her kommer DOM-manipulation ind i billedet. Med JavaScript kan du ændre både indhold, struktur og udseende på en webside i realtid. I denne artikel ser vi på, hvordan du i praksis kan arbejde med DOM’en – Document Object Model – og skabe interaktive oplevelser.

Hvad er DOM’en egentlig?

DOM står for Document Object Model og er en repræsentation af hele HTML-dokumentet som et træ af objekter. Hvert HTML-element – fra <div> til <p> – bliver et objekt, som JavaScript kan tilgå og ændre. Når du for eksempel skriver document.querySelector("h1"), får du adgang til det første <h1>-element på siden og kan ændre dets tekst, stil eller placering.

DOM’en fungerer som bindeleddet mellem HTML, CSS og JavaScript. Den gør det muligt for JavaScript at “forstå” strukturen på siden og reagere på brugerens interaktioner – som klik, tastetryk eller scroll.

Ændr indholdet dynamisk

En af de mest almindelige former for DOM-manipulation er at ændre tekst eller billeder på en side. Det kan være alt fra at opdatere en statusbesked til at vise nye data fra en server.

Eksempelvis kan du ændre teksten i et element med:

document.getElementById("status").textContent = "Data indlæst!";

Her finder JavaScript elementet med id’et status og ændrer dets tekst. Du kan også bruge innerHTML, hvis du vil indsætte HTML-struktur, men vær opmærksom på sikkerheden – især hvis indholdet kommer fra brugere.

Læs også:

Sådan designer du en skalerbar og vedligeholdelsesvenlig fullstack-applikation

Web

Lær hvordan du designer en fullstack-applikation, der er både skalerbar og nem at vedligeholde. Artiklen guider dig gennem arkitektur, modularitet, API-design og automatisering, så du kan skabe et system, der holder i længden.

Ensartet design på tværs af sider – sådan skaber du konsistens i farver og typografi

Web

Et ensartet design i farver og typografi giver dit website et troværdigt og brugervenligt udtryk. Læs, hvordan du arbejder strategisk med visuel konsistens, så dine sider hænger sammen og styrker helhedsoplevelsen for brugeren.

AI i webhosting: Sådan optimerer kunstig intelligens driften af dine servere

Web

Kunstig intelligens revolutionerer webhosting ved at forudsige fejl, optimere ressourcer og sikre mere stabile servere. Læs, hvordan AI kan effektivisere driften, reducere omkostninger og skabe en bedre oplevelse for både brugere og administratorer.

Løbende websitevedligeholdelse: Effektiv planlægning, faste rutiner og best practices

Web

Et website kræver løbende pleje for at yde sit bedste. Læs, hvordan du planlægger og udfører effektiv websitevedligeholdelse med faste rutiner, klare processer og best practices, der sikrer stabilitet, sikkerhed og en god brugeroplevelse.

Tilføj og fjern elementer

DOM-manipulation handler ikke kun om at ændre eksisterende elementer, men også om at skabe nye. Du kan for eksempel tilføje et nyt afsnit til en liste eller fjerne et element, når brugeren klikker på en knap.

const nyParagraf = document.createElement("p");
nyParagraf.textContent = "Dette afsnit er tilføjet med JavaScript.";
document.body.appendChild(nyParagraf);

Med createElement() opretter du et nyt element, og med appendChild() føjer du det til DOM’en. Tilsvarende kan du bruge remove() til at fjerne et element igen.

Denne teknik bruges ofte i webapps, hvor indhold skal opdateres løbende – for eksempel i chatprogrammer, produktlister eller dashboards.

Reager på brugerens handlinger

DOM-manipulation bliver først rigtig interessant, når den kombineres med events – altså hændelser som klik, tastetryk eller musbevægelser. Ved at tilføje event listeners kan du få din side til at reagere dynamisk.

const knap = document.querySelector("button");
knap.addEventListener("click", () => {
  document.body.style.backgroundColor = "lightblue";
});

Her ændres baggrundsfarven, når brugeren klikker på knappen. Det er et simpelt eksempel, men princippet er det samme i mere komplekse interaktioner – som at åbne menuer, validere formularer eller animere elementer.

Opdatering af struktur og klasser

Ofte handler DOM-manipulation om at ændre, hvordan elementer vises, snarere end at tilføje eller fjerne dem. Det kan du gøre ved at ændre CSS-klasser dynamisk.

const menu = document.querySelector(".menu");
menu.classList.toggle("åben");

Med classList.toggle() kan du slå en klasse til eller fra – perfekt til at vise og skjule elementer som dropdown-menuer eller modaler. Det giver en renere og mere fleksibel kode end at ændre CSS direkte i JavaScript.

Effektiv DOM-manipulation – undgå faldgruberne

Selvom DOM-manipulation er kraftfuldt, kan det også være en kilde til dårlig performance, hvis det bruges ukritisk. Hver gang du ændrer DOM’en, skal browseren opdatere layoutet og genberegne stilen – en proces, der kan være tung, især på mobile enheder.

Et par gode råd:

• Batch dine ændringer – lav flere ændringer i hukommelsen, før du tilføjer dem til DOM’en.
• Brug documentFragment til at samle flere elementer, inden du indsætter dem.
• Undgå unødvendige DOM-forespørgsler – gem referencer til elementer, du bruger ofte.
• Overvej frameworks som React eller Vue, hvis du arbejder med mange dynamiske opdateringer – de håndterer DOM’en mere effektivt gennem virtuelle repræsentationer.

Fra teori til praksis

DOM-manipulation er en grundlæggende færdighed for enhver webudvikler. Den gør det muligt at skabe levende, interaktive websites, hvor indhold og struktur kan ændres i takt med brugerens handlinger. Uanset om du bygger en simpel interaktiv side eller en kompleks webapplikation, er forståelsen af DOM’en nøglen til at få JavaScript og HTML til at spille sammen.

Når du først mestrer teknikkerne, åbner der sig et hav af muligheder – fra små visuelle effekter til fuldskala dynamiske brugergrænseflader.