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');Klausurrelevant
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 angezeigtAchtung
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"; // ZeigenTipp
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
Übungsfragen
Welcher querySelector-Aufruf wählt ein Element mit id='navigation' aus?
Was gibt inputElement.value zurück?
Was macht classList.toggle('aktiv') an einem Element?
Welche Eigenschaft verwendet man, um den CSS-Stil display direkt im Code auf none zu setzen?