Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m288:learningunits:lu08:01 [2025/12/03 00:29] – ↷ Seite von de:modul:m288:learningunits:lu09:01 nach de:modul:m288:learningunits:lu08:01 verschoben vdemir
+++ de:modul:m288:learningunits:lu08:01 [2025/12/08 14:34] (aktuell) – vdemir
@@ Zeile 19: / Zeile 19: @@
 JavaScript stellt verschiedene Methoden bereit, um auf Knoten im DOM zuzugreifen. Beispiele sind:
-document.getElementById("titel").textContent = "Neuer Titel";
+**Codebeispiel**
-document.getElementById("box").style.backgroundColor = "lightgray";
-  const neu = document.createElement("p");
+  <!DOCTYPE html>
-  neu.textContent = "Dynamisch erzeugter Absatz";
+  <html lang="de">
-  document.body.appendChild(neu);
+  <head>
+    <meta charset="UTF-8">
-Diese Befehle geben Referenzen auf Elemente im DOM zurück, die anschliessend weiterverarbeitet werden können.
+    <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>
-===== Ä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.
+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.
-===== 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 =====
-<color #ed1c24>TBD</color>
+{{:de:modul:m288:learningunits:lu08:the_dom_explained.mp4|HTML-DOM Explained}}
 ===== Zusatzmaterial =====