| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| de:modul:m307:learningunits:lu09:01 [2025/12/01 23:04] – angelegt vdemir | de:modul:m307:learningunits:lu09:01 [2026/02/10 09:12] (aktuell) – angelegt vdemir |
|---|
| ====== LU09a - HTML-DOM ====== | ====== LU09 - - TBD ====== |
| |
| ===== Lernziele ===== | |
| - ??? | |
| |
| ===== Einleitung ===== | |
| Der Begriff **HTML-DOM (Document Object Model) bezeichnet die strukturierte, hierarchische Repräsentation eines HTML-Dokuments in einer Form, die von Programmiersprachen verarbeitet werden kann. Sobald ein Webbrowser eine HTML-Datei lädt, erzeugt er aus dem Dokument eine baumartige Datenstruktur, in der jedes HTML-Element (z. B. <body>, <div>, <p>) als eigener Knoten dargestellt wird. | |
| |
| {{:de:modul:m307:learningunits:lu09:dom-tree1.png?600|HTML-DOM als Baumstruktur}} | |
| |
| Attribute, Textinhalte und Beziehungen zwischen Elementen werden ebenfalls in dieser Struktur abgebildet. | |
| |
| {{:de:modul:m307:learningunits:lu09:dom-tree2.png?600|Attribute, Inhalt und Beziehungen}} | |
| |
| ===== Zusammenhang mit JavaScript ===== | |
| JavaScript nutzt das DOM, um Inhalte einer Webseite dynamisch zu verändern, ohne die Seite neu zu laden. Der DOM-Baum dient hierbei als Schnittstelle: JavaScript kann auf jedes Element zugreifen, Eigenschaften auslesen, Werte ändern, neue Elemente erzeugen oder bestehende entfernen. Dadurch wird die statische HTML-Struktur in ein interaktives und reagierendes System überführt. | |
| |
| ===== Zugriff auf DOM-Elemente ===== | |
| JavaScript stellt verschiedene Methoden bereit, um auf Knoten im DOM zuzugreifen. Beispiele sind: | |
| |
| ===== Lernvideos ===== | |
| |
| <color #ed1c24>TBD</color> | |
| |
| ===== Zusatzmaterial ===== | |
| * [[https://www.w3schools.com/js/js_htmldom.asp|W3School - HTML-DOM]] | |
| * [[https://wiki.selfhtml.org/wiki/JavaScript/DOM|SelfHTML- HTML DOM]] | |
| |
| ---- | ---- |
| [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir | [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir |