DOM-manipulation og event listeners

Kommunikation og IT A · HTX · A-niveau · Frontend og UX

💻 DOM-manipulation

DOM (Document Object Model) er browserens programmatiske repræsentation af HTML-siden.

Vælge elementer:

```javascript

const knap = document.getElementById("send-knap");

const alle = document.querySelectorAll(".kort"); // NodeList

const første = document.querySelector("h1"); // første match

```

Ændre indhold og stil:

```javascript

knap.textContent = "Klik her"; // tekstindhold

knap.innerHTML = "<strong>Klik!</strong>"; // HTML-indhold (pas på XSS!)

knap.style.backgroundColor = "#ff0000";

knap.classList.add("aktiv"); // tilføj CSS-klasse

knap.classList.toggle("skjult"); // skift klasse til/fra

```

Event listeners:

```javascript

knap.addEventListener("click", (event) => {

console.log("Klikket!", event.target);

});

document.addEventListener("keydown", (e) => {

if (e.key === "Escape") lukModal();

});

formular.addEventListener("submit", (e) => {

e.preventDefault(); // forhindre side-reload

validerData();

});

```

Event delegation: sæt listener på forælder frem for hvert barn — effektivt for dynamiske lister.

Læringsmål

• Vælge og manipulere DOM-elementer med querySelector
• Tilføje event listeners til bruger-interaktioner
• Oprette og fjerne DOM-elementer dynamisk
• Anvende event delegation korrekt

Sådan kan du arbejde med emnet

• Skriv JavaScript der ændrer teksten i et HTML-element, når en knap klikkes
• Tilføj en event listener der reagerer på, at brugeren skriver i et inputfelt
• Forklar forskellen på addEventListener og inline onclick-attributter

Træningsforslag

• Byg en todo-liste app med ren JavaScript DOM-manipulation
• Implementér en live-søgning der filtrerer en liste mens brugeren skriver
• Lav en modal dialog der åbner/lukker med click og Escape