5.3 DOM-manipulering

Når koden griper tak i siden

Nå skal vi koble JavaScript til selve nettsiden. DOM-manipulering handler om å finne HTML-elementer og endre dem – endre tekst, stil, legge til nye elementer eller fjerne gamle. Dette er kjernen i interaktiv webutvikling.

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

Før du kan endre et element, må du finne det. Den mest fleksible metoden er querySelector(), som bruker CSS-selektorer:

const tittel = document.querySelector("#tittel");      // id
const info = document.querySelector(".info");          // klasse
const avsnitt = document.querySelector("p");           // element

querySelector finner det første elementet som matcher. Vil du ha alle, bruker du querySelectorAll(".kort"), som gir en liste du kan gå gjennom med forEach. Det finnes også getElementById("minId"). Med en liste på tre <li>-elementer vil for eksempel document.querySelectorAll("#liste li").length gi 3.

Å endre det du har funnet

Når du har fått tak i et element, kan du endre det. For tekst bruker du textContent: overskrift.textContent = "Ny overskrift!". Vil du sette inn HTML-tagger, bruker du innerHTML, som tolker taggene. Her er en viktig forskjell: textContent behandler alt som ren tekst, mens innerHTML faktisk tolker HTML. Det betyr også en sikkerhetsadvarsel – du bør aldri sette inn brukerdata med innerHTML, fordi det kan føre til XSS-angrep (cross-site scripting), der ondsinnet kode kjøres på siden. Bruk textContent for brukerinput.

Du kan også endre attributter direkte: bilde.src = "nytt.jpg", lenke.href = "..." og lenke.target = "_blank". Og du kan endre stiler via style-objektet, men med en vri: CSS-egenskaper med bindestrek skrives i camelCase. Altså element.style.backgroundColor = "lightblue", ikke background-color.

Den mest elegante måten å endre utseendet på er likevel via CSS-klasser med classList. I stedet for å sette mange stiler direkte, definerer du klasser i stilarket og slår dem av og på med JavaScript. boks.classList.add("uthevet") legger til en klasse, .remove("skjult") fjerner, .toggle("synlig") veksler (legger til hvis den mangler, fjerner hvis den finnes), og .contains("feilmelding") sjekker om den finnes. Dette er bedre enn å endre style direkte, fordi CSS-en holdes der den hører hjemme, du kan bruke animasjoner og overganger, og koden blir lettere å vedlikeholde.

Å bygge og rive

JavaScript kan også lage helt nye HTML-elementer og legge dem til på siden. Du oppretter et element med createElement, fyller det med innhold, og fester det til siden med appendChild:

const nyttPunkt = document.createElement("li");
nyttPunkt.textContent = "Nytt listepunkt";
nyttPunkt.classList.add("punkt");
document.querySelector("ul").appendChild(nyttPunkt);

For mer komplekse strukturer bygger du elementene hver for seg og setter dem sammen. Vil du lage et helt kort, oppretter du en div, en h3 for tittel, en p for tekst og en button, legger barna inn i kortet med appendChild, og fester til slutt hele kortet til en container. På denne måten kan du bygge dynamisk innhold ut fra data – for eksempel en oppgaveliste som vokser når brukeren legger til oppgaver.

Du kan også fjerne elementer. Det enkleste er element.remove(), som fjerner elementet selv. Alternativt bruker du liste.removeChild(barn) fra forelderen. Og vil du bytte ut et element, bruker du gammelElement.replaceWith(nyttElement). Med disse verktøyene – finne, endre, opprette og fjerne – kan du bygge nettsider som reagerer på alt brukeren gjør.

Oppsummering

DOM-manipulering er der JavaScript griper tak i nettsiden. DOM-en er en trestruktur av objekter som speiler HTML-dokumentet, og du finner elementer med querySelector (første treff), querySelectorAll (alle) og getElementById.

Når du har funnet et element, endrer du tekst med textContent, HTML med innerHTML (men aldri brukerdata, på grunn av XSS-fare), attributter direkte, og stiler enten via style (camelCase) eller mest elegant via classList. Du kan også bygge nytt innhold med createElement og appendChild, og rive ned med remove. Med disse verktøyene blir nettsiden levende og reagerer på alt brukeren foretar seg – grunnlaget for hendelseshåndteringen i neste kapittel.