Document Object Model (DOM)

Anzeige von HTML im Browser:

  • HTML Dokument wird geladen
  • HTML Dokument wird geparsed (Umwandlung des HTML Code in eine zur Anzeige und Interaktion geeignete Form)
    • es werden Objekte erstellt, die in einer Baumstruktur miteinander verbunden sind = Document Object Model (DOM)
    • jeweils Objekte für alle Elemente, Attribute, Text
  • Anzeige der Seite basierend auf dem DOM
  • DOM kann manipuliert werden und Anzeige ändert sich direkt
    • JavaScript kann auf DOM Objekte zugreifen und diese ändern, bzw. löschen oder neu hinzufügen

DOM ist eine Programmierschnittstelle (application programming interface = API)

  • um die Struktur des Dokument-Baumes zu erstellen (mit Elementen, Attributen, Text)
  • um das Dokument über Funktionen manipulieren zu können

DOM Objekt Typen

DOM Objekt Typen

  • Object: Prototyp aller Objekte
  • EventTarget: Potentielles Ziel von Events
  • Node: Knoten im DOM Baum
  • Attr: Attribut eines DOM Elements
  • Text: Text Inhalt von Attribut oder Element
  • HTMLElement: HTML Element im DOM Baum
  • Document: Seite im Browser mit DOM Baum (Zugriff über die globale Variable "document")

siehe weitere

Beispiel DOM Baum

DOM Beispiel

HTML<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel der Seite</title>
  </head>
  <body>
    <p>Text im Browserfenster</p>
  </body>
</html>

DOM im Chrome Browser untersuchen: von Styles auf Properties wechseln