Articles
Einführung in TypeScript
In TypeScript verwendete Klassen für DOM-Manipulation/Ereignisbehandlung

In TypeScript verwendete Klassen für DOM-Manipulation/Ereignisbehandlung

In diesem Artikel erklären wir die in TypeScript verwendeten Klassen für DOM-Manipulation/Ereignisbehandlung.

Sie können die Document-Klasse, die Element- und NodeList-Klassen sowie verschiedene ereignisbezogene Klassen anhand von Code-Beispielen kennenlernen.

YouTube Video

In TypeScript verwendete Klassen für DOM-Manipulation/Ereignisbehandlung

Für DOM-Manipulation und Ereignisbehandlung in TypeScript werden hauptsächlich die Schnittstellen des Document Object Model (DOM) verwendet. Bei der DOM-Manipulation und Ereignisbehandlung werden Standard-JavaScript-Klassen und -Schnittstellen verwendet, jedoch wird in TypeScript Typeninformation hinzugefügt, um eine sicherere Nutzung zu ermöglichen.

Im Folgenden werden die Klassen und Schnittstellen beschrieben, die häufig bei der DOM-Manipulation und Ereignisbehandlung verwendet werden.

Hauptklassen/-schnittstellen für die DOM-Manipulation

Document

Document ist ein Objekt, das HTML- oder XML-Dokumente darstellt. Wird verwendet, um auf den DOM-Baum zuzugreifen oder Elemente zu suchen.

Beispielcode 
 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});
Hauptmethoden
  • getElementById ruft ein Element mit dem angegebenen id-Attribut ab.
  • querySelector ruft ein Element mit einem CSS-Selektor ab.
  • createElement erstellt ein neues HTML-Element.
Code-Erklärung
  • Dieser Code ruft ein Element mit einem id-Attribut mittels getElementById ab und ändert dessen Text. Außerdem wird ein Button-Element mit querySelector ausgewählt und ein Klick-Event-Listener hinzugefügt. Beim Klick wird mit createElement ein neues div-Element erstellt und zum Hauptinhalt hinzugefügt. Generics und Typüberprüfungen werden verwendet, um während der DOM-Operationen die Typsicherheit zu gewährleisten.

Element

Element ist eine Schnittstelle, die einzelne HTML-Elemente im DOM repräsentiert. Es wird am häufigsten bei der Manipulation des DOM verwendet.

Beispielcode 
 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}
Haupteigenschaften und -methoden
  • Die Eigenschaft innerHTML ermöglicht das Setzen oder Abrufen des HTML-Inhalts eines Elements.
  • Die Eigenschaft textContent ermöglicht das Setzen oder Abrufen des Textinhalts eines Elements.
  • classList ist eine Eigenschaft zur Manipulation von Klassen. Sie ermöglicht es, Klassen hinzuzufügen, zu entfernen und umzuschalten.
  • Die Methode setAttribute setzt ein Attribut an einem Element.
Code-Erklärung
  • Dieser Code zeigt ein Beispiel dafür, wie Inhalte mit innerHTML und textContent für mit querySelector ausgewählte Elemente gesetzt, Klassen mit classList hinzugefügt und benutzerdefinierte Attribute mit setAttribute gesetzt werden. Die Operationen werden mit Generics typsicher durchgeführt.

NodeList und HTMLCollection

NodeList und HTMLCollection repräsentieren Sammlungen, die mehrere DOM-Elemente enthalten. Zum Beispiel gibt querySelectorAll eine NodeList zurück, und getElementsByClassName gibt eine HTMLCollection zurück.

Beispielcode 
 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});
  • Dieser Code demonstriert die direkte Bearbeitung einer NodeList mit forEach sowie die Umwandlung einer HTMLCollection in ein Array zur Iteration.

Hauptklassen/-schnittstellen für die Ereignisbehandlung

Event

Event ist die Basisklasse für alle Ereignisse, die im DOM auftreten. Verschiedene Ereignisse wie Klicks, Eingaben und Seitenladevorgänge erweitern die Event-Klasse.

Beispielcode 
 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});
Haupteigenschaften und -methoden
  • Die Eigenschaft target repräsentiert das Element (EventTarget), auf dem das Ereignis stattgefunden hat.
  • type steht für den Typ des ausgelösten Ereignisses, wie click oder input.
  • Die Methode preventDefault verhindert die Standardaktion des Ereignisses.
Code-Erklärung
  • Dieser Code zeigt, wie man einem Formular einen submit-Event-Listener hinzufügt. target bezieht sich auf das Formularelement, bei dem das Ereignis eintrat, und type gibt den Ereignistyp an (in diesem Fall "submit"). Durch Aufrufen der Methode preventDefault kann das Standardverhalten des Formulars, wie etwa Seitenwechsel oder Neuladen, verhindert werden. Stattdessen wird hier ein benutzerdefinierter Vorgang – die Protokollausgabe – ausgeführt.

MouseEvent

MouseEvent repräsentiert Ereignisse im Zusammenhang mit Mausoperationen. Mausereignisse wie click und mousemove verwenden diese Klasse.

Beispielcode 
1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}
  • Dieser Code verwendet MouseEvent, um die Mauskoordinaten zu protokollieren.
Haupteigenschaften
  • clientX ist die X-Koordinate des Mauszeigers innerhalb der Seite.
  • clientY ist die Y-Koordinate des Mauszeigers innerhalb der Seite.
  • button gibt an, welche Maustaste gedrückt wurde. 0 ist die linke Taste, 1 ist die mittlere Taste und 2 ist die rechte Taste.

KeyboardEvent

KeyboardEvent repräsentiert Ereignisse im Zusammenhang mit der Tastatur. keydown- und keyup-Ereignisse gehören zu dieser Kategorie.

Beispielcode 
 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});
Haupteigenschaften
  • key ist der Name der gedrückten Taste, z.B. Enter oder a.
  • code ist der Code, der einer Taste auf der Tastatur entspricht.
  • altKey, ctrlKey und shiftKey sind Eigenschaften, die anzeigen, ob die Alt-, Ctrl- oder Shift-Taste gedrückt wurde.
Code-Erklärung
  • Dieser Code verwendet KeyboardEvent, um den Namen der gedrückten Taste (key), den dazugehörigen Tastencode (code) sowie den Status der Modifikatortasten (altKey, ctrlKey, shiftKey) zu protokollieren. Außerdem wird eine spezielle Aktion ausgeführt, wenn die Enter-Taste gedrückt wird.

FocusEvent

FocusEvent bezieht sich auf Ereignisse des Gewinnens oder Verlustens von Fokus. focus- und blur-Ereignisse gehören zu dieser Kategorie.

Beispielcode 
 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}
  • Dieser Code demonstriert, wie mit einem FocusEvent erkannt und protokolliert wird, wann ein Eingabefeld den Fokus erhält oder verliert.

Typisierung in TypeScript

Bei der Verwendung von TypeScript wird die Typüberprüfung bei der DOM-Manipulation und Ereignisbehandlung verbessert. Nachfolgend finden Sie Beispiele für typsichere DOM-Manipulation und Ereignisbehandlung in TypeScript.

Typisierte Ereignis-Listener

Beim Hinzufügen von Ereignis-Listenern führt die Angabe des Ereignistyps zu einer Typüberprüfung und verhindert den Zugriff auf falsche Eigenschaften.

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});
  • Dieser Code zeigt, wie mit einem typisierten Event-Listener Eingabeereignisse behandelt und der aktuelle Wert eines Eingabefelds sicher erfasst und protokolliert werden kann.

Generische Ereignisbehandlung

Mit Generics in TypeScript können Sie eine generische Ereignisbehandlung durchführen, die verschiedene Arten von Ereignissen unterstützt.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);
  • Dieser Code ist ein Beispiel für einen generischen Ereignis-Handler mit Generika, der den Ereignistyp und den Tag-Namen des Zielelements protokolliert.

Zusammenfassung

In TypeScript werden Typen während der DOM-Manipulation und Ereignisbehandlung auf Standard-DOM-APIs angewendet, was die Codesicherheit und Lesbarkeit verbessert. Durch die Verwendung von Klassen wie Document und Element sowie von ereignisbezogenen Klassen wie Event, MouseEvent und KeyboardEvent ist eine typsichere Entwicklung möglich. Darüber hinaus ermöglichen querySelector<T>() oder HTMLCollectionOf<T> typsichere DOM-Manipulationen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

DOM-Manipulation in TypeScript