de:modul:m307:learningunits:lu09:01

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m307:learningunits:lu09:01 [2025/12/01 23:04] – angelegt vdemirde:modul:m307:learningunits:lu09:01 [2025/12/01 23:23] (aktuell) – vdemir
Zeile 2: Zeile 2:
  
 ===== Lernziele ===== ===== 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 ===== ===== 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.+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}}+| {{: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.  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 ===== ===== Zusammenhang mit JavaScript =====
Zeile 18: Zeile 18:
 ===== Zugriff auf DOM-Elemente ===== ===== Zugriff auf DOM-Elemente =====
 JavaScript stellt verschiedene Methoden bereit, um auf Knoten im DOM zuzugreifen. Beispiele sind: JavaScript stellt verschiedene Methoden bereit, um auf Knoten im DOM zuzugreifen. Beispiele sind:
 +
 +document.getElementById("titel").textContent = "Neuer Titel";
 +document.getElementById("box").style.backgroundColor = "lightgray";
 +
 +  const neu = document.createElement("p");
 +  neu.textContent = "Dynamisch erzeugter Absatz";
 +  document.body.appendChild(neu);
 +  
 +Diese Befehle geben Referenzen auf Elemente im DOM zurück, die anschliessend weiterverarbeitet werden können.
 +
 +===== Änderung von DOM-Inhalten =====
 +Durch DOM-Manipulation lassen sich Struktur, Inhalt und Darstellung beeinflussen. 
 +
 +**Beispiele:**
 +
 +  document.getElementById("titel").textContent = "Neuer Titel";
 +  document.getElementById("box").style.backgroundColor = "lightgray";
 +
 +  const neu = document.createElement("p");
 +  neu.textContent = "Dynamisch erzeugter Absatz";
 +  document.body.appendChild(neu);
 +  
 +In diesem Beispiel wird Text ersetzt, ein Stil angepasst und ein neues Element erzeugt und in das Dokument eingefügt.
 +
 +===== Ereignisverarbeitung (Event Handling) =====
 +Das DOM ermöglicht die Verarbeitung von Benutzerinteraktionen. JavaScript kann sogenannte „Event Listener“ registrieren, die auf Ereignisse reagieren, beispielweise Mausklicks oder Tastatureingaben.
 +
 +  document.getElementById("button").addEventListener("click", function () {
 +    alert("Schaltfläche wurde gedrückt.");
 +  });
 +
 +
 +
 +
  
 ===== Lernvideos ===== ===== Lernvideos =====
  • de/modul/m307/learningunits/lu09/01.1764626686.txt.gz
  • Zuletzt geändert: 2025/12/01 23:04
  • von vdemir