JavaScript und der Document Object Model (DOM) ermöglichen es Entwicklern, Webseiten dynamisch zu verändern – ohne die Seite neu laden zu müssen. Diese vier Übungen zeigen dir, wie du mit grundlegenden DOM-Manipulationen interaktive Elemente erstellst. Ideal für Einsteiger, die ihre JavaScript-Kenntnisse vertiefen möchten.
Grundlagen der DOM-Manipulation verstehen
Der DOM ist die Schnittstelle zwischen JavaScript und der HTML-Struktur einer Webseite. Jedes Element auf der Seite wird als Knoten (Node) im DOM-Baum dargestellt. Mit Methoden wie getElementById(), innerText oder addEventListener() kannst du diese Knoten gezielt ansprechen und deren Eigenschaften ändern.
Ein typisches Beispiel ist die Veränderung von Textinhalten. Mit nur wenigen Zeilen Code lässt sich der Inhalt eines HTML-Elements dynamisch aktualisieren – etwa, um Nutzerinteraktionen zu reagieren oder Daten asynchron zu laden. Die folgenden Übungen demonstrieren diese Prinzipien anhand konkreter Anwendungsfälle.
Übung 1: Text auf Knopfdruck ändern
Diese Übung zeigt, wie du den Text eines HTML-Elements mit einem Klick auf eine Schaltfläche aktualisierst. Der Code nutzt die Methode innerText, um den Inhalt des <h1>-Elements zu ändern.
<body>
<h1 id="text">Willkommen zu JavaScript</h1>
<button id="but" onclick="changetext()">Ändern</button>
<script>
const heading = document.getElementById("text");
function changetext() {
heading.innerText = "Willkommen zum DOM";
}
</script>
</body>Funktionsweise:
- Das Skript greift über
getElementById()auf das<h1>-Element zu. - Die Funktion
changetext()wird beim Klick auf die Schaltfläche ausgeführt. innerTextersetzt den ursprünglichen Text durch die neue Zeichenfolge.
Diese Technik eignet sich besonders für dynamische Überschriften oder Statusmeldungen.
Übung 2: Glühbirne ein- und ausschalten
Hier lernst du, wie du Bilder und Schaltflächenfarben basierend auf Benutzeraktionen wechselst. Das Beispiel nutzt eine Glühbirnen-Grafik und eine Schaltfläche, deren Text und Farbe sich je nach Zustand ändern.
<body>
<img id="bulb-img" src="bulb_off.gif" alt="Glühbirne">
<button id="bnt1" style="color: green; padding: 10px 15px; border-radius: 20px; font-size: medium;" onclick="bulb_change()">EIN</button>
<script>
function bulb_change() {
const button = document.getElementById("bnt1");
const bulb = document.getElementById("bulb-img");
if (bulb.src.includes("bulb_off.gif")) {
bulb.src = "bulb_on.gif";
button.innerText = "AUS";
button.style.color = "red";
} else {
bulb.src = "bulb_off.gif";
button.innerText = "EIN";
button.style.color = "green";
}
}
</script>
</body>Wichtige Details:
- Die Schaltfläche wechselt zwischen den Zuständen "EIN" und "AUS".
- Die Farbe der Schaltfläche passt sich dem Zustand an (grün für eingeschaltet, rot für ausgeschaltet).
- Der Bildpfad wird dynamisch überprüft, um den richtigen Zustand zu setzen.
Diese Logik lässt sich auf viele interaktive Elemente übertragen, etwa Toggle-Schaltflächen oder Dark-Mode-Umschalter.
Übung 3: Zähler mit Addieren, Subtrahieren und Zurücksetzen
Ein Zähler ist eine klassische Übung, um Variablen und DOM-Interaktionen zu üben. Hier wird ein numerischer Wert erhöht, verringert oder zurückgesetzt – alles mit benutzerdefinierten Funktionen.
<body>
<h1>Zähler = <span id="number">0</span></h1>
<button id="butt_add" onclick="increase()">+</button>
<button id="butt_sub" onclick="decrease()">-</button>
<button id="but_reset" onclick="Reset()">Zurücksetzen</button>
<script>
const numberDisplay = document.getElementById("number");
let counter = 0;
function increase() {
counter++;
numberDisplay.innerText = counter;
}
function decrease() {
if (counter > 0) {
counter--;
numberDisplay.innerText = counter;
}
}
function Reset() {
counter = 0;
numberDisplay.innerText = counter;
}
</script>
</body>Funktionsweise:
- Eine globale Variable
counterspeichert den aktuellen Zählerstand. - Die Funktionen
increase(),decrease()undReset()manipulieren diese Variable und aktualisieren die Anzeige. - Die Schaltfläche zum Subtrahieren prüft, ob der Zähler bereits bei null steht, um negative Werte zu vermeiden.
Dieses Muster findet sich in vielen Anwendungen wieder, etwa bei Warenkörben oder Punktesystemen.
Übung 4: Echtzeit-Zeichenzähler für Texteingaben
Ein Zeichen- oder Wortzähler ist nützlich für Formulare oder Kommentarfelder. Diese Übung demonstriert, wie du Eingaben in Echtzeit analysierst und die Anzahl der Zeichen oder Wörter anzeigt.
<body>
<input id="user-input" type="text" oninput="calculate()">
<h1 id="result">Anzahl = <span id="number">0</span></h1>
<script>
function calculate() {
const counterElement = document.getElementById("number");
const inputField = document.getElementById("user-input");
counterElement.innerText = inputField.value.length;
}
</script>
</body>Anwendungsbeispiele:
- Begrenzung der Zeichen in Social-Media-Posts.
- Validierung von Formularfeldern.
- Dynamische Anpassung von UI-Elementen basierend auf Eingabelänge.
Die Methode oninput reagiert auf jede Tastatureingabe und aktualisiert die Anzeige sofort. Alternativ könnte man onkeyup oder addEventListener('input', ...) verwenden.
Fazit: DOM-Manipulation in der Praxis anwenden
Diese vier Übungen zeigen, wie vielseitig die DOM-Manipulation mit JavaScript sein kann. Von einfachen Textänderungen bis hin zu interaktiven Zählern oder Echtzeit-Analysen – die Grundprinzipien bleiben stets ähnlich:
- Elemente über ihre ID oder Klasse identifizieren.
- Funktionen erstellen, die auf Nutzerinteraktionen reagieren.
- DOM-Eigenschaften wie
innerText,srcodervalue.lengthdynamisch aktualisieren.
Mit etwas Übung lassen sich diese Techniken auf komplexere Projekte übertragen, etwa Single-Page-Applications oder Progressive Web Apps. Beginne mit einfachen Beispielen und steigere dich zu anspruchsvolleren Anwendungen.
KI-Zusammenfassung
JavaScript’in DOM manipülasyonunu kullanarak buton tıklamalarıyla metin değiştirme, ışık açma-kapama, sayı sayacı ve karakter sayacı gibi basit uygulamaları nasıl geliştirebileceğinizi keşfedin.
