de:modul:m288:learningunits:lu08:01

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m288:learningunits:lu08:01 [2025/12/03 00:29] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m288:learningunits:lu08:01 [2025/12/08 14:34] (aktuell) – vdemir
Zeile 1: Zeile 1:
 +====== 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. <body>, <div>, <p>) 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**
 +
 +  <!DOCTYPE html>
 +  <html lang="de">
 +  <head>
 +    <meta charset="UTF-8">
 +    <title>Demo – DOM Manipulation</title>
 +    <style>
 +        #box {
 +            width: 200px;
 +            height: 100px;
 +            background-color: salmon;
 +            padding: 10px;
 +            margin-top: 10px;
 +        }
 +    </style>  
 +  </head>
 +  <body>
 +    <h1 id="titel">Alter Titel</h1>
 +    <div id="box">
 +        Dies ist eine Box.
 +    </div>
 +    <button onclick="machWas()">Klick mich</button>
 +    <script>
 +        function machWas() {
 +            document.getElementById("titel").textContent = "Neuer Titel";
 +            document.getElementById("box").style.backgroundColor = "lightgray";
 +        }
 +    </script>
 +
 +  
 +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