Spring til indhold
Academi.dk

Web og HTTP

DOM - JavaScript på siden

Let øvet DA↔EN-ordliste

DOM er browserens udgave af din HTML som objekter, JavaScript kan læse og ændre. Du finder et element med querySelector, læser eller skriver dets indhold, og ændringen ses med det samme på siden, uden at filen på disken bliver ændret.

Forudsætter, at du har set html-sidens opbygning , funktioner i javascript .

Siden som objekter

Når browseren læser din HTML, bygger den et træ af objekter. Ét for hvert element. Det træ er DOM’en, og JavaScript kan gå ind i det og ændre alt.

Det er vigtigt at forstå, at du ændrer browserens udgave af siden, ikke selve HTML-filen. Genindlæser du, er alt tilbage, som det var.

Find et element

const titel = document.querySelector("h1");
const boks = document.querySelector("#resultat");
const kort = document.querySelectorAll(".kort");
  • querySelector giver det første element, der passer, eller null.
  • querySelectorAll giver dem alle som en liste, du kan løbe igennem.
  • Selektoren er den samme, som du bruger i CSS: #id, .klasse, element.

Du vil også se getElementById("resultat"). Den gør det samme som querySelector("#resultat"); brug bare den ene af dem konsekvent.

Læs og skriv indholdet

const boks = document.querySelector("#resultat");

boks.textContent = "Der er 4 resultater";
boks.classList.add("synlig");
boks.classList.remove("skjult");
boks.setAttribute("aria-live", "polite");
  • textContent sætter ren tekst. Brug den som standard.
  • innerHTML fortolker indholdet som HTML. Den er praktisk og farlig: sætter du noget ind, som en bruger har skrevet, kan de smugle kode ind på din side.
  • classList.add / .remove / .toggle er den rigtige måde at skifte udseende - du lader CSS bestemme, hvordan klassen ser ud.

Byg nye elementer

Eksempel 
const liste = ["Ida", "Omar", "Sofie"];

const html = liste
.map((navn) => "<li>" + navn + "</li>")
.join("");

console.log("<ul>" + html + "</ul>");

Output

Tryk på “Kør koden”.

Sådan ser mønsteret ud, når data skal vises: map laver en liste af HTML-stumper, join sætter dem sammen, og resultatet sættes ind med innerHTML. Alternativt bygger du elementerne ét for ét:

const ul = document.querySelector("#liste");

for (const navn of liste) {
  const li = document.createElement("li");
  li.textContent = navn;
  ul.appendChild(li);
}

Den anden form er længere, men sikker mod indhold, brugeren har skrevet.

Formularfelter

const felt = document.querySelector("#alder");
const alder = Number(felt.value);

value er altid tekst, også i et felt med type="number". Skal du regne på det, skal det først igennem Number(). Se datatyper.

Kort opsamling

  • DOM er siden som objekter; ændringer forsvinder ved genindlæsning.
  • querySelector med CSS-selektorer finder elementer.
  • textContent til tekst, classList til udseende.
  • null betyder, at elementet ikke blev fundet.

Læs videre

Senest gennemgået .