5.3 DOM-manipulering

DOM-manipulering

No som du kan grunnleggjande JavaScript, er det på tide å kople språket til nettsida. DOM-manipulering handlar om å bruke JavaScript til å finne HTML-element på sida og endre dei – endre tekst, stil, leggje til nye element eller fjerne eksisterande. Dette er kjernen i interaktiv webutvikling.

Når nettlesaren lastar ei HTML-side, byggjer han opp ein Document Object Model (DOM) – ei trestruktur der kvart HTML-element er eit objekt. JavaScript kan navigere i dette treet, lese innhaldet og eigenskapane til elementa, og endre dei. Endringar i DOM-en blir reflekterte umiddelbart på skjermen, slik at brukaren ser oppdateringane utan å laste sida på nytt.

Før du kan endre eit element, må du finne det. JavaScript tilbyr fleire metodar for dette:

querySelector – den mest fleksible metoden

querySelector() bruker CSS-selektorar for å finne element:

// 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 matchande element

// 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");

Døme 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 elementa 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 funne eit element, kan du endre innhaldet og eigenskapane:

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-eigenskapar med bindestrek (som background-color) blir skrivne med camelCase i JavaScript (backgroundColor).

Den mest elegante måten å endre utsjånaden til element på er via CSS-klassar. I staden for å setje stilar direkte i JavaScript, definerer du klassar i CSS og legg dei til eller fjernar dei 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ærminga er betre enn å endre style direkte fordi:
- CSS-koden blir halden i stilarket der han høyrer heime
- Du kan bruke CSS-animasjonar og overgangar
- Koden er lettare å lese og vedlikehalde
- Fleire stilar blir endra med éin operasjon

JavaScript kan også lage heilt nye HTML-element og leggje dei til på sida:

Opprette nye element

// 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);

Meir avansert: Byggje opp ei 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 element

// 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 element

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 ei trestruktur av objekt.
- Finne element: querySelector, querySelectorAll og getElementById.
- Endre innhald: textContent og innerHTML.
- Endre attributt og stilar: direkte via JavaScript.
- Opprette og fjerne element: byggje dynamisk innhald.

Nøkkelomgrep