📝 DOM

Das Document Object Model (DOM) ist eine Art von Bauplan oder Struktur, die Webseiten für den Browser verständlich macht. Wenn eine Webseite im Browser geöffnet wird, verwandelt der Browser den HTML-Code der Seite in ein DOM. Das DOM beschreibt die Inhalte der Webseite als eine Art Baum, der aus verschiedenen Teilen besteht, wie dem Text, den Bildern, Links und Überschriften.

 

Struktur

Jeder Teil einer Webseite, wie ein Absatz oder ein Bild, wird im DOM als "Knoten" (Node) bezeichnet. Diese Knoten sind miteinander verbunden, ähnlich wie die Äste eines Baumes. Ganz oben im DOM steht der oberste Knoten, das sogenannte "Document". Darunter befinden sich andere Knoten, wie der <html>, <head> und <body>-Tag. Jeder dieser Knoten kann wiederum Unterknoten haben, die den eigentlichen Inhalt der Seite, wie Texte und Bilder, darstellen.

 

Eine der größten Vorteile an DOM ist, dass es sich nicht nur um eine statische Struktur handelt. Programmierer:innen können mit Sprachen wie JavaScript das DOM verändern, während die Seite im Browser angezeigt wird. Das bedeutet, man kann Teile der Seite hinzufügen, entfernen oder verändern, ohne die gesamte Seite neu laden zu müssen. Zum Beispiel könnte ein Klick auf einen Button dafür sorgen, dass ein neues Bild oder Text angezeigt wird – all das passiert durch Änderungen im DOM.

 

📌 Beispiel

Stell dir vor, du hast eine einfache Webseite mit einem Absatz:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <p>Hallo, Welt!</p>
  </body>
</html>

 

Das DOM für diese Webseite sieht so aus:

  • Dokument (oberster Knoten)
    • html
      • head
        • title: "Meine Seite"
      • body
        • p: "Hallo, Welt!"

 

Mit JavaScript kannst du nun zum Beispiel den Text "Hallo, Welt!" in "Hallo, Programmierer!" ändern, indem du den entsprechenden Knoten im DOM veränderst. Das DOM ist also wie eine Brücke, die die Webseite mit JavaScript verbindet, sodass Webseiten dynamisch und interaktiv gestaltet werden können.

💡

KEY FACTS

Was bedeutet DOM?

  • Das Document Object Model (DOM) ist eine Baumstruktur, die den Aufbau einer Webseite beschreibt.
  • Jeder Teil der Webseite, wie Text oder Bilder, wird im DOM als Knoten (Node) dargestellt.
  • Programmierer können das DOM mit JavaScript verändern, um Webseiten dynamisch und interaktiv zu machen.
  • Das DOM ermöglicht es, Elemente der Seite hinzuzufügen, zu entfernen oder zu ändern, ohne die Seite neu zu laden.

 

#dom #documentobjectmodel