Was Ist das DOM?

Jetzt, da wir JavaScript-Klassen behandelt haben, konzentrieren wir uns auf das Document Object Model (DOM), das die Schnittstelle ist, die es uns ermöglicht, Webseiten zu manipulieren. Der nächste Abschnitt wird untersuchen, wie JavaScript mit dem DOM interagiert, um dynamische, interaktive Inhalte zu erstellen.

Stellen Sie sich das DOM wie einen Stammbaum vor. Jedes Element im Dokument ist wie ein Familienmitglied, verbunden durch Beziehungen - Eltern, Kinder und Geschwister.

Im DOM werden Elemente, Attribute und Text als Knoten bezeichnet, und diese Knoten sind hierarchisch angeordnet, genau wie Familienmitglieder in einem Stammbaum. Einige Knoten sind Eltern mit Kindern, während andere Geschwister sind.

Die Beziehung zwischen HTML und dem DOM

Wenn ein Browser ein HTML-Dokument lädt, liest er den HTML-Code und erstellt einen entsprechenden DOM-Baum. HTML bietet die statische Struktur der Webseite, während das DOM die lebendige, dynamische Darstellung ist, die von JavaScript manipuliert werden kann.

HTML definiert die anfängliche Struktur des Familienstammbaums, wer mit wem verbunden ist, aber es ist statisch und ändert sich nicht von selbst;
Das DOM ist der Familienstammbaum in Echtzeit und kann verändert werden. Neue Mitglieder (Elemente) können hinzugefügt oder entfernt werden, und Beziehungen (Eltern-Kind, Geschwister) können von JavaScript aktualisiert werden.

Zum Beispiel:

Dieses HTML erstellt einen grundlegenden Familienstammbaum mit einem <html>-Knoten als Elternteil und den <head>- und <body>-Knoten als dessen Kinder. Innerhalb des Körpers sind <h1> und <p> Geschwister.

Diese Struktur ist die lebendige, interaktive Version des DOMs des HTML, in der JavaScript Beziehungen zwischen Knoten (Familienmitgliedern) manipulieren kann.

Wie JavaScript mit dem DOM interagiert

JavaScript kann auf das DOM zugreifen und es manipulieren, um Änderungen am Familienstammbaum in Echtzeit vorzunehmen. Sie können neue Mitglieder hinzufügen, bestehende entfernen oder deren Informationen ändern.

Zugriff auf Familienmitglieder: Genau wie Sie eine bestimmte Person in einem Familienstammbaum finden können, kann JavaScript einzelne Knoten im DOM mit Methoden wie document.getElementById() oder document.querySelector() zugreifen;
Informationen ändern: Sobald auf ein Familienmitglied zugegriffen wurde, können deren Details aktualisiert werden. Zum Beispiel kann JavaScript den Textinhalt oder die Attribute eines Elements mit Eigenschaften wie innerHTML oder textContent ändern;
Beziehungen modifizieren: JavaScript kann auch neue Familienmitglieder zum Baum hinzufügen oder entfernen. Dies geschieht durch Manipulation der DOM-Struktur mit Methoden wie appendChild() oder removeChild().

Beispiel

Betrachten Sie dieses HTML:

Mit JavaScript können wir den Text des Absatzes ändern, genau wie den Namen eines Familienmitglieds aktualisieren:

Nach dem Ausführen des JavaScript-Codes wird der Familienstammbaum (DOM) aktualisiert und der Text des Absatzes ändert sich von "Hello, World!" zu "Hello, JavaScript!"

index.html

index.js

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 1