Articles
Einführung in TypeScript
DOM-Manipulation in TypeScript

DOM-Manipulation in TypeScript

Dieser Artikel erklärt die DOM-Manipulation in TypeScript.

Sie lernen, wie man DOM-Elemente manipuliert und wie man mithilfe von Codebeispielen Elemente zum oder vom DOM-Baum hinzufügt bzw. entfernt.

YouTube Video

DOM-Manipulation in TypeScript

Die DOM-Manipulation in TypeScript erfolgt ähnlich wie in JavaScript, jedoch bietet TypeScript eine Typüberprüfung, was die Bedienung sicherer macht. Das DOM (Document Object Model) ist ein Objektmodell, das verwendet wird, um HTML- und XML-Dokumente programmatisch zu manipulieren. Es ermöglicht den Zugriff auf im Browser angezeigte Seiten, das Hinzufügen oder Entfernen von Elementen sowie das Ändern von Stilen.

Lassen Sie uns die grundlegenden Methoden zur Manipulation des DOM mit TypeScript vorstellen.

Abrufen von DOM-Elementen

Verwenden Sie das document-Objekt, um HTML-Elemente zu erhalten. Die folgenden Methoden werden häufig verwendet:.

  1. document.getElementById document.getElementById erhält das Element mit dem angegebenen ID-Attribut.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById ruft das Element mit der angegebenen ID ab und ermöglicht den Zugriff auf dessen Inhalt, falls es existiert.`.
  1. document.querySelector document.querySelector ruft das erste Element ab, das dem CSS-Selektor entspricht.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector ruft das erste Element ab, das dem angegebenen CSS-Selektor entspricht, und ermöglicht den Zugriff auf dessen Inhalt, falls es existiert.`.
  1. document.querySelectorAll document.querySelectorAll ruft alle Elemente ab, die dem CSS-Selektor entsprechen.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll ruft alle Elemente ab, die dem angegebenen CSS-Selektor entsprechen, und ermöglicht über Iteration den Zugriff auf deren Inhalt.`.

Typüberprüfung von Elementen

In TypeScript ermöglicht es die explizite Festlegung des Elementtyps, spezifischere Methoden und Eigenschaften zu verwenden.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Das as-Schlüsselwort ist ein Typumwandlungsoperator in TypeScript, mit dem dem Compiler explizit mitgeteilt wird, einen Wert als einen bestimmten Typ zu behandeln.
  • In TypeScript können Sie Typumwandlungen verwenden, um das abgerufene Element als einen bestimmten Typ zu behandeln und auf eigens für diesen Typ verfügbare Eigenschaften oder Methoden zuzugreifen.

Manipulieren des DOM

Die Manipulation des DOM erfolgt über die Eigenschaften der Elemente. Dadurch können Sie flexibel Änderungen am Text oder an Attributen steuern, Stile anwenden und angezeigte Inhalte aktualisieren.

  1. Text eines Elements ändern

    Sie können den Text oder das HTML eines Elements mit textContent oder innerHTML ändern.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Sie können textContent oder innerHTML eines Elements verwenden, um den angezeigten Text oder HTML-Inhalt zu ändern.

  1. Stil eines Elements ändern

    Sie können Inline-Stile über die style-Eigenschaft des Elements ändern.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Dieser Code ruft ein bestimmtes Element ab, ändert dessen Textfarbe zu Blau und setzt die Schriftgröße auf 20px.

  1. Attribute eines Elements ändern

    Wenn Sie Attribute eines Elements ändern möchten, verwenden Sie setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Dieser Code ändert das href-Attribut des ersten Link-Elements auf der Seite zu https://example.com.

  1. Bearbeiten von Elementklassen

    Um Elementklassen hinzuzufügen oder zu entfernen, verwenden Sie die classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Dieser Code fügt einem bestimmten Element die Klasse active hinzu und entfernt die Klasse inactive.

DOM-Elemente hinzufügen und entfernen

Sie können auch neue Elemente hinzufügen oder bestehende entfernen. Dies ermöglicht es, die Seitenstruktur dynamisch als Reaktion auf Benutzeraktionen oder den Zustand der Anwendung zu ändern.

  1. Neue Elemente erstellen und hinzufügen

    Verwenden Sie document.createElement, um ein neues Element zu erstellen und zum DOM hinzuzufügen.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Dieser Code erstellt ein neues <div>-Element, setzt dessen Text und fügt es dem <body> der Seite hinzu.

  1. Elemente entfernen

    Um ein Element zu entfernen, verwenden Sie die Methoden removeChild oder remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Dieser Code zeigt, wie man ein bestimmtes Kindelement von seinem übergeordneten Element entfernt und wie man das Element selbst direkt entfernt.

Events hinzufügen

In TypeScript können Sie Elementen Ereignis-Listener hinzufügen, um Aktionen basierend auf Benutzerinteraktionen auszuführen.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Dieser Code fügt einen Ereignis-Listener hinzu, der eine Nachricht in der Konsole anzeigt, wenn der Button geklickt wird.
  • Mit addEventListener können Sie verschiedene Ereignisse wie Klicks, Mausbewegungen und Tastatureingaben abfangen und bearbeiten.

Wichtige Hinweise zur DOM-Manipulation mit TypeScript

Wenn Sie das DOM mit TypeScript manipulieren, kann das Beachten von Typdefinitionen der Elemente und null-Prüfungen dazu beitragen, Fehler zu vermeiden und robusten Code zu schreiben.

  1. Null-Überprüfung

    Da ein DOM-Element möglicherweise nicht existiert, wird empfohlen, vor der Manipulation von Elementen in TypeScript eine Null-Überprüfung durchzuführen.

  2. Explizite Typüberprüfung

    Wenn Sie mit einem bestimmten Element arbeiten (z. B. einem HTMLInputElement), ist es üblich, mit einem Assertion (as) den Typ anzugeben und elementspezifische Eigenschaften wie value zu verwenden.

Wenn Sie dies beachten, können Sie mit TypeScript durch die Kombination der Flexibilität von JavaScript und der Typsicherheit von TypeScript sichereren und vorhersehbareren Code schreiben.

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

Das window-Objekt in TypeScriptIn TypeScript verwendete Klassen für DOM-Manipulation/Ereignisbehandlung