6.2 JavaScript og DOM-manipulering

Motoren i nettleseren

JavaScript er motoren bak moderne webapplikasjoner. Ved å manipulere DOM – Document Object Model – kan vi endre HTML og CSS dynamisk, hente data fra servere og skape interaktive opplevelser. DOM er en trestruktur-representasjon av HTML-dokumentet som JavaScript kan endre i sanntid.

De vanligste DOM-operasjonene er enkle å lære. Du henter elementer med document.getElementById('minId') eller document.querySelectorAll('.minKlasse'). Du endrer innhold med element.textContent = 'Ny tekst' for ren tekst, eller element.innerHTML for HTML. Du endrer styling med element.style.color = 'red' eller ved å legge til og fjerne CSS-klasser med element.classList.add('aktiv') og classList.remove('skjult'). Og du kan opprette nye elementer med document.createElement('div') og henge dem på siden med appendChild.

For at en side skal være interaktiv, må den reagere på brukeren. Det gjør vi med event-håndtering. Med addEventListener lytter vi på hendelser:

knapp.addEventListener('click', () => {
  console.log('Klikket!');
});

Vi kan lytte på mange hendelser – click, mouseover, keydown, change, submit og flere. En spesielt nyttig teknikk er e.preventDefault(), som stopper standardoppførsel – for eksempel hindrer at et skjema laster siden på nytt når det sendes, slik at vi kan håndtere dataene selv.

Asynkron JavaScript og fetch

Å hente data over et nettverk tar tid, og vi vil ikke at hele programmet skal fryse mens vi venter på svar. Derfor er nettverkskall i JavaScript asynkrone. Verktøyet vi bruker, heter fetch, og det lar oss hente data fra API-er uten å laste siden på nytt.

Nøkkelbegrepet er en promise – et løfte om et fremtidig resultat. En promise kan være i tre tilstander: pending (operasjonen pågår), fulfilled (den lyktes), eller rejected (den feilet). Fetch returnerer en promise, og den eldre måten å håndtere den på er med .then() og .catch():

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Feil:', error));

Den moderne og mer lesbare måten er async/await. Du markerer funksjonen med async, og bruker await for å pause til en promise er løst – da ser koden nesten synkron ut, men er fortsatt asynkron:

async function hentData() {
  try {
    const response = await fetch('https://api.example.com/users');
    if (!response.ok) throw new Error('Forespørsel feilet');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Feil:', error);
  }
}

Legg merke til try/catch for feilhåndtering og sjekken response.ok, som er sann for vellykkede statuskoder. Dette mønsteret er ryggraden i all datahenting i moderne JavaScript.

Bygge dynamisk innhold og sende data

Nå kan vi knytte alt sammen til ekte interaktivitet. Et vanlig mønster er å hente en liste fra et API når brukeren klikker en knapp, og bygge HTML dynamisk fra resultatet. Du gir tilbakemelding underveis ved å vise en «Laster…»-melding, henter dataene med await fetch, skjuler meldingen, og bygger så listen med en forEach-løkke som oppretter et <li>-element for hver bruker og legger det til på siden. Slik fylles siden med levende data uten en eneste full omlasting.

Du kan også sende data til serveren. Til det bruker du fetch med ekstra innstillinger. Du setter method: 'POST', oppgir headeren 'Content-Type': 'application/json' så serveren vet hva den får, og legger dataene i body etter å ha konvertert dem til en JSON-streng med JSON.stringify:

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(brukerdata)
});

Serveren svarer vanligvis med den opprettede ressursen, som du kan lese med await response.json(). Disse tre delene – method, headers og body – er alt du trenger for å sende strukturert data fra nettleseren til et API. Sammen med datahentingen utgjør det grunnlaget for enhver interaktiv webapplikasjon.

Oppsummering

JavaScript er motoren som gjør nettsider levende. Gjennom DOM kan vi hente, endre, style og opprette elementer, og med event-håndtering via addEventListener reagerer siden på brukeren – der preventDefault() lar oss overta kontrollen fra nettleseren.

Fordi nettverkskall tar tid, er datahenting asynkron, bygget på promises med tilstandene pending, fulfilled og rejected. Vi bruker fetch sammen med moderne async/await og try/catch for å hente data uten å laste siden på nytt, og bygger dynamisk innhold fra resultatet. Med method: 'POST', riktige headere og JSON.stringify i body kan vi også sende data til serveren. I neste kapittel bygger vi selve serveren – backend med Python og Flask.