====== LU08a - HTML-DOM ====== ===== Lernziele ===== - Den Begriff **HTML-DOM** in eigenen Worten beschreiben - Zusammenhang zwischen JavaScript und HTML-DOM darlegen können. - Den Zugriff JS-Zugriff auf HTML-DOM Elemente beschreiben können. ===== 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. ,
,

) als eigener Knoten dargestellt wird. | {{:de:modul:m307:learningunits:lu09:dom-tree1.png?700|HTML-DOM als Baumstruktur}} | {{:de:modul:m307:learningunits:lu09:dom-tree2.png?700|Attribute, Inhalt und Beziehungen}} | Attribute, Textinhalte und Beziehungen zwischen Elementen werden ebenfalls in dieser Struktur abgebildet. ===== 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: **Codebeispiel** Demo – DOM Manipulation

Alter Titel

Dies ist eine Box.
Im obigen Code wird beim Drücken des Buttons die Farbe in der Box geändert und der Titel von //Alter Titel// in //Neuer Titel// geändert, wobei dafür die HTML-DOM-methode //getElementById// verwendet wird. ===== Lernvideos ===== {{:de:modul:m288:learningunits:lu08:the_dom_explained.mp4|HTML-DOM Explained}} ===== 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