Lernen Was ist das Document Object Model (DOM)? | DOM-Manipulation für Interaktive Webentwicklung

Nachdem wir uns mit JavaScript-Klassen beschäftigt haben, richten wir nun unseren Fokus auf das Document Object Model (DOM), die Schnittstelle, die es ermöglicht, Webseiten zu manipulieren. Im nächsten Abschnitt wird erläutert, wie JavaScript mit dem DOM interagiert, um dynamische und 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, ähnlich wie Familienmitglieder in einem Stammbaum. Einige Knoten sind Eltern mit Kindern, andere sind Geschwister.

Die Beziehung zwischen HTML und dem DOM

Wenn ein Browser ein HTML-Dokument lädt, liest er den HTML-Code und erstellt daraus einen entsprechenden DOM-Baum. HTML liefert 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 Stammbaums, also wer mit wem verbunden ist, bleibt jedoch statisch und ändert sich nicht von selbst;
Das DOM ist der Stammbaum in Echtzeit und kann verändert werden. Neue Mitglieder (Elemente) können hinzugefügt oder entfernt werden, und Beziehungen (Eltern-Kind, Geschwister) können durch JavaScript aktualisiert werden.

Zum Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Dieses HTML erstellt einen einfachen Stammbaum mit einem <html>-Knoten als Elternteil und den <head>- und <body>-Knoten als dessen Kinder. Im Body sind <h1> und <p> Geschwister.

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

Wie JavaScript mit dem DOM interagiert

JavaScript kann auf das DOM zugreifen und es manipulieren, um Änderungen am Stammbaum in Echtzeit vorzunehmen. Neue Mitglieder können hinzugefügt, bestehende entfernt oder deren Informationen geändert werden.

Zugriff auf Familienmitglieder: Ähnlich wie man eine bestimmte Person in einem Stammbaum findet, kann JavaScript einzelne Knoten im DOM mit Methoden wie document.getElementById() oder document.querySelector() ansprechen;
Informationen ändern: Sobald ein Familienmitglied gefunden wurde, können dessen Details aktualisiert werden. Beispielsweise kann JavaScript den Textinhalt oder 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:

<p id="greeting">Hello, World!</p>

Mit JavaScript können wir den Text des Absatzes ändern, ähnlich wie beim Aktualisieren des Namens eines Familienmitglieds:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Nach Ausführung 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

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain more about how to access different types of DOM nodes?

What are some common methods for modifying the DOM with JavaScript?

Can you give more examples of how JavaScript can change the structure of a webpage?

Awesome!

Completion rate improved to 2.22

Swipe um das Menü anzuzeigen