Dette modul forvandler dine statiske websider til interaktive oplevelser ved at kontrollere browserens visning i realtid.
Lektion 12: DOM (Document Object Model)
Når en browser indlæser en HTML-side, forvandler den koden til et interaktivt familietræ af objekter. Dette træ kaldes DOM-træet. JavaScript kan navigere rundt i dette træ for at finde, ændre, tilføje eller slette HTML-elementer.
1. Valg af HTML-elementer
Før du kan ændre noget på siden, skal du fortælle JavaScript, hvilket element du vil have fat i. I moderne JavaScript bruger vi primært metoden querySelector(), fordi den bruger præcis samme syntaks som CSS-selectors.
// Hent det første element med et bestemt ID (#)
const overskrift = document.querySelector("#hoved-overskrift");
// Hent det første element med en bestemt klasse (.)
const infoTekst = document.querySelector(".tekst-boks");
// Hent ALLE elementer med en bestemt klasse (returnerer en liste/NodeList)
const alleKnapper = document.querySelectorAll(".Gem-knap");
2. Ændring af indhold og tekst
Når du har fanget et element, kan du nemt ændre teksten eller den underliggende HTML-kode.
// Ændrer kun den rene tekst (Sikkert mod XSS)
overskrift.textContent = "Velkommen til min nye verden!";
// Ændrer indholdet og fortolker HTML-tags (Brug med omtanke)
infoTekst.innerHTML = "Dette er en <strong>vigtig</strong> besked!";
3. Manipulation af CSS og klasser
Du bør sjældent ændre CSS-styles direkte linje for linje i JavaScript (f.eks. element.style.color = "red"). Den professionelle måde er at definere klasserne i din CSS-fil, og derefter tænde og slukke for klasserne med JavaScript via classList.
const boks = document.querySelector(".min-boks");
boks.classList.add("aktiv"); // Tilføjer klassen .aktiv
boks.classList.remove("skjult"); // Fjerner klassen .skjult
// .toggle() tænder klassen, hvis den mangler, og slukker den, hvis den findes i forvejen (perfekt til mørkt tema / dark mode!)
boks.classList.toggle("dark-mode");
Lektion 13: Event håndtering (begivenheder)
JavaScript kan lytte efter "begivenheder" (events) på hjemmesiden. En begivenhed kan være, at brugeren klikker på en knap, scroller ned ad siden, sender en formular eller trykker på en tast på tastaturet.
For at lytte efter en begivenhed bruger vi funktionen addEventListener().
Grundlæggende klik-event
const knap = document.querySelector("#min-knap");
// Vi fortæller knappen, at den skal lytte efter et 'click'.
// Når det sker, kører vi en arrow-funktion.
knap.addEventListener("click", () => {
alert("Du klikkede på knappen!");
});
Formularhåndtering og event-objektet
Når en begivenhed udløses, sender JavaScript automatisk et event-objekt (ofte bare kaldet e eller event) med ind i funktionen. Dette objekt indeholder nyttig information om begivenheden.
Når du arbejder med formularer (<form>), genindlæser browseren automatisk siden som standard, når man trykker på "Send". Det vil vi typisk forhindre med JavaScript ved hjælp af e.preventDefault().
const formular = document.querySelector("#login-form");
const inputFelt = document.querySelector("#brugernavn");
formular.addEventListener("submit", (e) => {
e.preventDefault(); // Stopper browseren i at genindlæse siden
const indtastetNavn = inputFelt.value; // Henter teksten fra inputfeltet
console.log(`Formularen blev sendt med navnet: ${indtastetNavn}`);
});
Event Delegation (Smartere lytning)
Hvis du har en liste med 100 elementer, er det meget tungt for computeren at sætte en addEventListener på hver eneste linje. I stedet sætter man én enkelt lytter på hele listen (forælderen) og bruger e.target til at finde ud af, nøjagtigt hvilket underelement brugeren klikkede på.
const liste = document.querySelector("#indkøbsliste");
liste.addEventListener("click", (e) => {
// Tjek om det, brugeren klikkede på, rent faktisk er et listepunkt (<li>)
if (e.target.tagName === "LI") {
e.target.classList.toggle("streget-ud"); // Gør noget med det specifikke element
}
});
Praktisk eksempel: Byg en interaktiv "tæller"
Lad os binde alt det lærte sammen i et lille, funktionelt eksempel. Forestil dig, at du har følgende HTML på din side:
<h1 id="tal-visning">0</h1>
<button id="plus-knap">Tæl op</button>
Her er JavaScript-koden, der vælger elementerne, holder styr på dataen (en variabel) og opdaterer DOM'en, hver gang der klikkes:
// 1. Vælg elementerne
const talVisning = document.querySelector("#tal-visning");
const plusKnap = document.querySelector("#plus-knap");
// 2. Definer vores data (State)
let tællerVærdi = 0;
// 3. Lyt efter klik og opdater siden
plusKnap.addEventListener("click", () => {
tællerVærdi++; // Læg 1 til variablen
talVisning.textContent = tællerVærdi; // Opdater teksten på skærmen
});
