Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:js:learningunits:lu01:dom [2024/10/24 08:00] – angelegt kdemirci
+++ modul:ffit:js:learningunits:lu01:dom [2024/10/24 08:05] (aktuell) – kdemirci
@@ Zeile 25: / Zeile 25: @@
 ===== Modifizieren von DOM-Elementen =====
+==== Ändern von Inhalten ====
+Um den Text oder HTML-Inhalt eines Elements zu ändern, gibt es zwei Hauptmethoden:
+**textContent** Verändert den reinen Text eines Elements, ohne HTML-Tags zu interpretieren.
+<code javascript>
+document.getElementById("meinElement").textContent = "Neuer Text";
+</code>
+**innerHTML** Erlaubt das Setzen von HTML-Inhalten innerhalb eines Elements.
+<code javascript>
+document.getElementById("meinElement").innerHTML = "<strong>Fetter Text</strong>";
+</code>
+==== Ändern von Attributen ====
+Mit der Methode setAttribute() können wir Attribute von HTML-Elementen ändern. Zum Beispiel, um das src-Attribut eines Bildes zu ändern:
+<code javascript>
+document.getElementById("meinBild").setAttribute("src", "neuesBild.jpg");
+</code>
+Ebenso können wir das class- oder id-Attribut eines Elements ändern:
+<code javascript>
+document.getElementById("meinElement").setAttribute("class", "neueKlasse");
+</code>
+==== CSS-Stile ändern ====
+Mit der Eigenschaft style können wir die CSS-Stile eines Elements direkt in JavaScript verändern.
+<code javascript>
+document.getElementById("meinElement").style.backgroundColor = "blue";
+</code>
+Mann kann so ziemlich jeden CSS-Stil über JavaScript ändern. Wichtig: In JavaScript werden mehrteilige CSS-Eigenschaften wie background-color in Kamel-Schreibweise (camelCase) geschrieben, also backgroundColor.
+==== Elemente hinzufügen und entfernen ====
+Um ein neues Element in den DOM einzufügen, nutzt man die Methode createElement() und anschließend appendChild(), um das Element an eine bestehende Struktur anzuhängen.
+<code javascript>
+const neuesElement = document.createElement("p");
+neuesElement.textContent = "Dies ist ein neuer Absatz.";
+document.body.appendChild(neuesElement);
+</code>
+Um ein Element zu entfernen, nutzt man removeChild():
+<code javascript>
+const element = document.getElementById("meinElement");
+element.parentNode.removeChild(element);
+</code>
+===== Ereignisse (Events) und Funktionen mit Buttons auslösen =====
+DOM-Elemente können auf Benutzereingaben reagieren, indem sie Events (Ereignisse) auslösen. Ein Event ist eine Aktion, die im Browser stattfindet, wie z.B. ein Mausklick oder ein Tastendruck.
+Häufig genutzte Events:
+  * **click:** Wird ausgelöst, wenn ein Element angeklickt wird.
+  * **input:** Wird ausgelöst, wenn der Benutzer Eingaben in ein Formularfeld macht.
+  * **mouseover:** Tritt auf, wenn der Mauszeiger über ein Element bewegt wird.
+Um auf ein Event zu reagieren, verknüpfen wir eine Funktion (auch als Event-Handler bezeichnet) mit einem DOM-Element. Dies geschieht meistens durch die Methode addEventListener().
+<code html>
+<button id="meinButton">Klick mich</button>
+</code>
+<code javascript>
+document.getElementById("meinButton").addEventListener("click", function() {
+  alert("Button wurde geklickt!");
+});
+</code>
+Die Methode addEventListener() wird verwendet, um ein Ereignis (in diesem Fall click) mit einem DOM-Element zu verknüpfen.
+Wenn der Button angeklickt wird, wird die Funktion ausgeführt, die ein Popup mit der Nachricht "Button wurde geklickt!" ausgibt.