5.1 Einführung in das Document Object Model

Mitte der 90er wurde die Sprache JavaScript erfunden und kurze Zeit später von den meisten Browsern implementiert. Mit JavaScript ergaben sich neue Möglichkeiten, auf ein HTML-Dokument zuzugreifen und Ereignisse darin zu behandeln.

Das W3C versuchte, mit der Entwicklung von DOM, sowohl die JavaScript- als auch die HTML-Techniken zu vereinen und daraus einen Standard für alle Browser zu bilden. Als eine lesbare Strukturierung von Daten durch XML ermöglicht wurde, benötigte man zusätzlich eine Schnittstelle, die nicht nur mit HTML sondern auch mit XML kompatibel war.

Die Idee zur Entwicklung des Document Object Models liegt also der Notwendigkeit zugrunde, dass es auf die Daten von HTML- aber auch XML-Dokumenten eine einfache, aber einheitliche Zugriffsmöglichkeit geben sollte.

Das DOM ist nicht nur auf HTML beschränkt, sondern kann allgemein auf die Beschreibung von Dokumenten angewandt werden. Es definiert Objekte, Schnittstellen und Verhaltensweisen, jedoch keine spezifischen internen Datenstrukturen oder Funktionen. Die aktuelle Spezifikation des DOM wird vom WHATWG als "Living Standard" kontinuierlich aktualisiert.

Unterschiede zwischen DOM Level 1, DOM Level 2 und aktuellen Standards

Das DOM hat sich seit seiner Einführung kontinuierlich weiterentwickelt, um den wachsenden Anforderungen an Webentwicklung gerecht zu werden:

  • DOM Level 1 (1998):

    • Einführung grundlegender Funktionen für die Manipulation von HTML- und XML-Dokumenten.

    • Ermöglichte einfachen Zugriff auf Dokumentelemente, z. B. über getElementById.

    • Fokus auf die Darstellung der hierarchischen Baumstruktur.

  • DOM Level 2 (2000):

    • Erweiterung um Unterstützung für XML-Namespaces und CSS.

    • Einführung von Ereignis-Handling mit einer standardisierten Event-API.

    • Unterstützung für dynamische Stilanpassungen.

  • Aktuelle Standards (Living Standard):

    • Erweiterung des DOM um moderne Webentwicklungsfunktionen, z. B. querySelector und querySelectorAll für flexible Elementauswahl.

    • Verbesserte Performance und Unterstützung für neue APIs wie Shadow DOM, Mutation Observer und Custom Elements.

Beispiel: Dynamische Manipulation mit JavaScript

Mit JavaScript können wir dynamisch auf Elemente im DOM zugreifen und sie ändern. Hier ein Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <title>DOM Beispiel</title>
</head>
<body>
  <h1 id="headline">Willkommen!</h1>
  <button id="changeText">Text ändern</button>

  <script>
    document.getElementById('changeText').addEventListener('click', function() {
      let headline = document.getElementById('headline');
      headline.textContent = 'Moin';
    });
  </script>
</body>
</html>

In diesem Beispiel ändern wir den Text einer Überschrift durch das Klicken eines Buttons. Besonders wichtig ist der Zugriff auf die DOM-Elemente durch die Methoden getElementById und das Event-Handling mit addEventListener.

Hauptfunktionen des DOM

Zu den zentralen Funktionen des DOM gehören:

  • Veränderung des Dokumenteninhalts

  • Erstellung kompletter Dokumente

  • Navigation durch ein Dokument

  • Löschen und Einfügen von Elementen

  • Veränderung der Eigenschaften von Elementen

Mit diesen Werkzeugen erstellen wir interaktive und dynamische Webanwendungen, die auf Benutzerinteraktionen reagieren und Inhalte in Echtzeit aktualisieren können.