5.3 DOM-manipulering

DOM-manipulering

Nå som du kan grunnleggende JavaScript, er det på tide å koble språket til nettsiden. DOM-manipulering handler om å bruke JavaScript til å finne HTML-elementer på siden og endre dem – endre tekst, style, legge til nye elementer eller fjerne eksisterende. Dette er kjernen i interaktiv webutvikling.

Når nettleseren laster en HTML-side, bygger den opp en Document Object Model (DOM) – en trestruktur der hvert HTML-element er et objekt. JavaScript kan navigere i dette treet, lese elementenes innhold og egenskaper, og endre dem. Endringer i DOM-en reflekteres umiddelbart på skjermen, slik at brukeren ser oppdateringene uten å laste siden på nytt.

Før du kan endre et element, må du finne det. JavaScript tilbyr flere metoder for dette:

querySelector – den mest fleksible metoden

querySelector() bruker CSS-selektorer for å finne elementer:

// Finn det første elementet med id="overskrift"
const overskrift = document.querySelector("#overskrift");

// Finn det første elementet med klassen "info"
const info = document.querySelector(".info");

// Finn den første <p>-taggen
const avsnitt = document.querySelector("p");

// Finn det første <a>-elementet inne i en <nav>
const lenke = document.querySelector("nav a");

querySelectorAll – finn alle matchende elementer

// Finn ALLE elementer med klassen "kort"
const alleKort = document.querySelectorAll(".kort");

// Gå gjennom alle matchende elementer
alleKort.forEach(kort => {
  console.log(kort.textContent);
});

getElementById – finn element med ID

const element = document.getElementById("minId");

Eksempel med HTML

Gitt denne HTML-koden:

<h1 id="tittel">Min nettside</h1>
<p class="beskrivelse">Velkommen til siden min.</p>
<ul>
  <li class="punkt">Punkt 1</li>
  <li class="punkt">Punkt 2</li>
  <li class="punkt">Punkt 3</li>
</ul>

Kan vi finne elementene slik:

const tittel = document.querySelector("#tittel");
const beskrivelse = document.querySelector(".beskrivelse");
const allePunkter = document.querySelectorAll(".punkt");

console.log(tittel.textContent);       // "Min nettside"
console.log(beskrivelse.textContent);  // "Velkommen til siden min."
console.log(allePunkter.length);       // 3

Når du har funnet et element, kan du endre innholdet og egenskapene:

Endre tekst med textContent

const overskrift = document.querySelector("#tittel");
overskrift.textContent = "Ny overskrift!";

Endre HTML med innerHTML

const boks = document.querySelector("#innhold");
boks.innerHTML = "<strong>Viktig:</strong> Denne teksten er <em>endret</em>.";

Endre attributter

const bilde = document.querySelector("img");
bilde.src = "nytt-bilde.jpg";
bilde.alt = "Et nytt bilde";

const lenke = document.querySelector("a");
lenke.href = "https://www.nrk.no";
lenke.target = "_blank";

Endre stiler direkte

const element = document.querySelector("#boks");
element.style.backgroundColor = "lightblue";
element.style.padding = "20px";
element.style.borderRadius = "10px";
element.style.fontSize = "18px";   // Merk: camelCase i stedet for bindestrek

Legg merke til at CSS-egenskaper med bindestrek (som background-color) skrives med camelCase i JavaScript (backgroundColor).

Den mest elegante måten å endre utseendet til elementer er via CSS-klasser. I stedet for å sette stiler direkte i JavaScript, definerer du klasser i CSS og legger dem til eller fjerner dem med JavaScript:

/* CSS */
.synlig { display: block; }
.skjult { display: none; }
.uthevet { background-color: yellow; font-weight: bold; }
.feilmelding { color: red; border: 2px solid red; padding: 10px; }

// JavaScript
const boks = document.querySelector("#meldingsboks");

// Legge til en klasse
boks.classList.add("uthevet");

// Fjerne en klasse
boks.classList.remove("skjult");

// Veksle en klasse (legger til hvis den mangler, fjerner hvis den finnes)
boks.classList.toggle("synlig");

// Sjekke om en klasse finnes
if (boks.classList.contains("feilmelding")) {
  console.log("Det er en feilmelding!");
}

// Legge til flere klasser samtidig
boks.classList.add("synlig", "uthevet");

Denne tilnærmingen er bedre enn å endre style direkte fordi:
- CSS-koden holdes i stilarket der den hører hjemme
- Du kan bruke CSS-animasjoner og overganger
- Koden er lettere å lese og vedlikeholde
- Flere stiler endres med én operasjon

JavaScript kan også lage helt nye HTML-elementer og legge dem til på siden:

Opprette nye elementer

// Opprett et nytt <li>-element
const nyttPunkt = document.createElement("li");
nyttPunkt.textContent = "Nytt listepunkt";
nyttPunkt.classList.add("punkt");

// Legg til i en eksisterende liste
const liste = document.querySelector("ul");
liste.appendChild(nyttPunkt);

Mer avansert: Bygge opp en komplett struktur

// Lag et nytt kort-element
const kort = document.createElement("div");
kort.classList.add("kort");

const kortTittel = document.createElement("h3");
kortTittel.textContent = "Nytt kort";

const kortTekst = document.createElement("p");
kortTekst.textContent = "Dette kortet ble laget med JavaScript.";

const kortKnapp = document.createElement("button");
kortKnapp.textContent = "Les mer";

// Sett sammen strukturen
kort.appendChild(kortTittel);
kort.appendChild(kortTekst);
kort.appendChild(kortKnapp);

// Legg kortet til på siden
document.querySelector("#kortContainer").appendChild(kort);

Fjerne elementer

// Fjern et element
const element = document.querySelector("#gammelBoks");
element.remove();

// Alternativ: Fjern et barn-element
const liste = document.querySelector("ul");
const forstePunkt = liste.querySelector("li");
liste.removeChild(forstePunkt);

Erstatte elementer

const gammelElement = document.querySelector("#gammel");
const nyttElement = document.createElement("div");
nyttElement.textContent = "Nytt innhold";

gammelElement.replaceWith(nyttElement);

Oppsummering

I dette kapittelet har du lært:

- DOM: representerer HTML-dokumentet som en trestruktur av objekter.
- Finne elementer: querySelector, querySelectorAll og getElementById.
- Endre innhold: textContent og innerHTML.
- Endre attributter og stiler: direkte via JavaScript.
- Opprette og fjerne elementer: bygge dynamisk innhold.

Noekkelbegreper