DOM-manipulation og event listeners

It A · STX · A-niveau · Frontend og UX

💻 DOM-manipulation og event listeners

DOM (Document Object Model) = browserens objekt-repræsentation af en HTML-side. Hver tag bliver et "node". JavaScript kan læse + ændre DOM dynamisk → interaktive websider.

DOM-træ: document er rod. document.body = body-tag. document.getElementById('myDiv') = specifikt element.

Selectors (vælg elementer):

1. getElementById(id) — én element via id.

2. getElementsByClassName(class) — HTMLCollection.

3. getElementsByTagName(tag) — HTMLCollection.

4. querySelector(selector) — første match (CSS-selector). Eks: document.querySelector('.btn-primary').

5. querySelectorAll(selector) — NodeList af alle matches.

Manipulation:

• (a) element.textContent — sæt/få tekst-indhold (sikkert mod XSS!).
• (b) element.innerHTML — sæt/få HTML (FARLIG ved bruger-input → XSS).
• (c) element.setAttribute('href', 'url') — sæt attribut.
• (d) element.classList.add('active'), .remove(), .toggle(), .contains().
• (e) element.style.color = 'red' — inline-styling.

Oprettelse + indsættelse: const div = document.createElement('div'); div.textContent = 'Hello'; document.body.appendChild(div).

Sletning: element.remove() eller parent.removeChild(element). Event listeners = funktioner der køres når noget sker (klik, tast, scroll, indlæsning).

Syntaks: element.addEventListener('event', callback).

Almindelige events:

1. click — museklik.

2. submit — formulars submission.

3. change

Læringsmål

• Manipulere DOM-elementer med JavaScript
• Tilføje event listeners til brugerinteraktion
• Opdatere en webside dynamisk uden genindlæsning

Sådan kan du arbejde med emnet

• Byg en simpel to-do-liste, der tilføjer og sletter punkter via DOM-manipulation
• Forklar, hvad event bubbling er, og brug event delegation til at håndtere klik på dynamiske elementer
• Diskutér, hvad der er forskellen på getElementById og querySelector i DOM-manipulation

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.