WebP 1 – DOM-Zugriff und Events

Zusammenfassung

TypeScript wurde entwickelt, um Webseiten interaktiv zu machen. Die Verbindung zwischen TypeScript und HTML geschieht über den DOM (Document Object Model). Über das globale document-Objekt kann TypeScript auf einzelne HTML-Elemente zugreifen, deren Inhalt verändern, Klassen hinzufügen oder entfernen und auf Events reagieren (Klicks, Formulareingaben, Seitenladen). Diese Verbindung nennt das Skript Schnittstellen — TypeScript und HTML kommunizieren über den DOM miteinander.

Schlüsselbegriffe

document

Das globale TypeScript-Objekt, das den DOM repräsentiert. Es entspricht dem <html>-Element als Wurzel des Baums. Über document kann auf alle HTML-Elemente zugegriffen werden.

querySelector

Methode des document-Objekts, die ein einzelnes HTML-Element anhand eines CSS-Selektors auswählt. Beispiel: document.querySelector('#submitForm') wählt das Element mit id='submitForm'.

innerText

Attribut von HTML-Elementen, das den sichtbaren Textinhalt enthält (ohne HTML-Tags). Kann gelesen und geschrieben werden.

innerHTML

Ähnlich wie innerText, enthält aber den vollständigen HTML-Code zwischen öffnendem und schließendem Tag (inklusive HTML-Tags).

value

Attribut von Input-Elementen, das den aktuellen Inhalt des Eingabefelds enthält. Über value.value kann man lesen, was der Nutzer eingegeben hat.

addEventListener

Methode zum Registrieren eines Eventhandlers an einem HTML-Element. Syntax: element.addEventListener('eventname', (event) => { ... }). Die Callback-Funktion wird aufgerufen, wenn das Event eintritt.

Event

Ein Ereignis, das im Browser auftritt — z. B. ein Klick, Tastendruck, Scrollen oder das Laden der Seite. TypeScript kann auf Events reagieren, indem Eventhandler mit addEventListener registriert werden.

DOMContentLoaded

Ein Event des document-Objekts, das ausgelöst wird, sobald das HTML vollständig geparst und der DOM-Baum aufgebaut ist. Erst dann können Elemente sicher selektiert werden.

event.preventDefault()

Methode auf dem Event-Objekt, die das Standardverhalten des Browsers unterbindet. Bei Formularen verhindert es das automatische Neuladen der Seite beim Absenden.

querySelectorAll

Eine Methode des document-Objekts, die eine statische NodeList aller Elemente zurückgibt, die dem angegebenen CSS-Selektor entsprechen.

Event-Target

Das DOM-Element, auf dem das Ereignis ursprünglich ausgelöst wurde. Kann im Eventhandler über event.target ausgelesen werden.

Kernkonzepte

Elemente auswählen

TypeScript greift über das document-Objekt auf den DOM zu. querySelector wählt ein Element anhand eines CSS-Selektors:

// Mit ID-Selektor (#):
const submitForm: HTMLFormElement = document.querySelector('#submitForm');
 
// Mit Name-Attribut innerhalb eines Formulars:
const inputName: HTMLInputElement = document.querySelector('#submitForm[name="fullname"]');
 
// Mit Element-Selektor (erstes h1-Element):
const headline: HTMLElement = document.querySelector('h1');
 
// Alternativ (ältere Methode, nur für IDs):
const element = document.getElementById('submitForm');

Wichtig

querySelector gibt null zurück, wenn kein passendes Element gefunden wird. Vor dem Zugriff auf Attribute oder Methoden sollte immer geprüft werden, ob das Element existiert: if (element) { ... }.

Elemente verändern

innerText und innerHTML

const headline: HTMLElement = document.querySelector('h1');
 
// innerText: Nur Text, keine HTML-Interpretation
headline.innerText = "Neue Überschrift";
 
// innerHTML: Mit HTML-Tags (Vorsicht bei Nutzereingaben!)
headline.innerHTML = "Neue <strong>Überschrift</strong>";
// → Das Wort "Überschrift" wird fettgedruckt angezeigt

Achtung

innerHTML interpretiert HTML-Tags im Text. Wenn man Nutzereingaben direkt in innerHTML schreibt, können Angreifer schädlichen Code einschleusen (Cross-Site-Scripting, XSS). Für reine Textausgaben immer innerText verwenden.

value bei Input-Elementen

const inputName: HTMLInputElement = document.querySelector('#submitForm[name="fullname"]');
 
// Wert lesen (was der Nutzer eingegeben hat):
const name: string = inputName.value;
 
// Wert schreiben (Feld vorausfüllen):
inputName.value = "Max Muster";

Klassen manipulieren

const box: HTMLElement = document.querySelector('.box');
 
box.classList.add("aktiv");          // Klasse hinzufügen
box.classList.remove("versteckt");   // Klasse entfernen
box.classList.toggle("dunkel");      // Hinzufügen falls nicht vorhanden, entfernen falls vorhanden
box.classList.contains("aktiv");     // Prüfen ob Klasse vorhanden (gibt boolean zurück)

classList.toggle ist besonders nützlich für Darkmode-Schalter oder aufklappbare Menüs.

style.display

Elemente können direkt ein- und ausgeblendet werden:

element.style.display = "none";    // Verstecken
element.style.display = "block";   // Zeigen

Tipp

Besser ist es, CSS-Klassen zu togglen (.classList.toggle("versteckt")), als Inline-Styles zu setzen. CSS-Regeln sind leichter wartbar und können im Stylesheet zentralisiert werden.

Events und Eventhandler

Webentwicklung ist event-getrieben: Fast alles, was passiert, wird durch ein Event ausgelöst. Ein Eventhandler ist eine Funktion, die auf ein bestimmtes Event reagiert.

Eventhandler registrieren:

const submitForm: HTMLFormElement = document.querySelector('#submitForm');
const inputName: HTMLInputElement = document.querySelector('#submitForm[name="fullname"]');
const headline: HTMLElement = document.querySelector('h1');
 
submitForm.addEventListener('submit', (event) => {
  event.preventDefault();                            // Kein Neuladen der Seite!
  const name: string = inputName.value;
  headline.innerText = `Willkommen ${name}`;
});

Jeder Eventhandler besteht aus drei Teilen:

Was: Das Event-Typ ('submit', 'click', 'DOMContentLoaded')
Wo: Das HTML-Element, an dem der Handler registriert ist (submitForm)
Wie: Die Callback-Funktion, die ausgeführt wird ((event) => { ... })

Wichtige Event-Typen

Event	Tritt auf bei
`'click'`	Mausklick auf ein Element
`'submit'`	Absenden eines Formulars
`'DOMContentLoaded'`	HTML vollständig geladen und DOM bereit
`'mouseover'`	Maus bewegt sich auf ein Element
`'keydown'`	Tastendruck
`'scroll'`	Scrollen der Seite

DOMContentLoaded — sicherer Start

TypeScript-Code greift auf DOM-Elemente zu. Diese existieren erst, wenn das HTML vollständig geparst wurde. Deshalb sollte TypeScript-Code, der den DOM manipuliert, erst nach dem DOMContentLoaded-Event ausgeführt werden:

document.addEventListener('DOMContentLoaded', () => {
  // Erst jetzt sind alle HTML-Elemente verfügbar
  const button: HTMLElement = document.querySelector('#meinButton');
 
  button.addEventListener('click', () => {
    button.innerText = "Geklickt!";
  });
});

Info

Als Alternative zu DOMContentLoaded kann man das <script>-Tag im HTML mit dem Attribut defer versehen: <script src="mein.js" defer></script>. Das hat denselben Effekt — das Skript wird erst nach dem Parsen des HTML ausgeführt.

event.preventDefault() beim Submit-Event

Wenn ein Formular abgesendet wird, lädt der Browser von sich aus die Seite neu. Das ist historisch so und heute meist unerwünscht. event.preventDefault() verhindert dieses Standardverhalten:

formular.addEventListener('submit', (event) => {
  event.preventDefault();  // Kein Seiten-Reload!
  // Jetzt kann TypeScript die Eingaben verarbeiten
});

Event-Bubbling

Events steigen im DOM-Baum nach oben — von Kind zu Elternelement. Ein Klick auf einen <span> innerhalb eines <button> löst zuerst das Click-Event des <span> aus, dann das des <button>, dann des <div> usw. bis zum document.

Das nennt man Event-Bubbling. Es ist meist gewünscht (ein Handler am Container fängt alle Kind-Events ab), kann aber mit event.stopPropagation() unterbrochen werden.

Vollständiges Beispiel

document.addEventListener('DOMContentLoaded', () => {
  const form: HTMLFormElement = document.querySelector('#registrierungsformular');
  const inputName: HTMLInputElement = document.querySelector('#name');
  const inputEmail: HTMLInputElement = document.querySelector('#email');
  const meldung: HTMLElement = document.querySelector('#meldung');
 
  form.addEventListener('submit', (event) => {
    event.preventDefault();
 
    const name: string = inputName.value;
    const email: string = inputEmail.value;
 
    if (name === "" || email === "") {
      meldung.innerText = "Bitte alle Felder ausfüllen!";
      meldung.classList.add("fehler");
    } else {
      meldung.innerText = `Willkommen, ${name}! Registrierung erfolgreich.`;
      meldung.classList.remove("fehler");
    }
  });
});

Lernkarten

Frage

Was macht document.querySelector('#meinButton')?

Antwort

Es sucht im DOM nach dem ersten Element mit id='meinButton' und gibt es zurück. Wird kein Element gefunden, gibt querySelector null zurück. Der Parameter ist ein CSS-Selektor — also # für IDs, . für Klassen.

1 / 7

Übungsfragen

Welcher querySelector-Aufruf wählt ein Element mit id='navigation' aus?

1 / 6