JavaScript Mittelstufe Tag 4: DOM-Manipulation

Ziel dieses Tages

Heute lernst du:

• Wie du mit JavaScript Webseiten steuerst
• Verwendung von document.querySelector() zum Auswählen von Elementen
• Events hinzufügen mit addEventListener()
• HTML-Inhalte und CSS-Stile dynamisch ändern

Am Ende wirst du deine Webseiten interaktiv machen können.

Schritt 1: Elemente auswählen

Verwende document.querySelector(), um ein Element auszuwählen:

const button = document.querySelector("button");

Schritt 2: Event Listener hinzufügen

Füge Verhalten zu Elementen hinzu:

button.addEventListener("click", () => {
  alert("Geklickt!");
});

Schritt 3: HTML & CSS ändern

Du kannst Text oder Stil ändern:

const message = document.querySelector("#message");

message.textContent = "Neuer Text";
message.style.color = "red";

Übung

document.querySelector("button")
  .addEventListener("click", () => {
    alert("Geklickt!");
  });

Aufgabe

Erledige die folgenden Aufgaben:

• Erstelle einen Button in HTML
• Ändere seinen Text beim Klicken mit JavaScript

Beispiel:

// HTML
// <button id="myBtn">Klick mich</button>

// JavaScript
const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  btn.textContent = "Geklickt!";
});