
In diesem Kapitel vertiefen wir uns in die Arbeit mit dem Document Object Model (DOM). Wir lernen, wie man Elemente auswählt, sie manipuliert und Fehler effektiv behandelt.
1. Was ist das DOM?
Das DOM ist eine programmierbare Darstellung der HTML-Struktur einer Webseite. Es erlaubt uns, auf Elemente der Seite zuzugreifen und sie zu manipulieren.
2. Auswahl von Elementen
JavaScript bietet verschiedene Möglichkeiten, um Elemente im DOM auszuwählen:
a) Auswahl nach ID
Der einfachste Weg, ein Element auszuwählen, ist mithilfe der ID:
const element = document.getElementById('meine-id');
console.log(element);
b) Auswahl nach CSS-Selektoren
CSS-Selektoren erlauben komplexere Auswahlen:
- Ein einzelnes Element:
const element = document.querySelector('.meine-klasse');
console.log(element);
- Mehrere Elemente:
const elements = document.querySelectorAll('.meine-klasse');
elements.forEach(el => console.log(el));
c) Auswahl nach Tag-Namen
const elements = document.getElementsByTagName('p');
for (let element of elements) {
console.log(element);
}
d) Auswahl nach Klassenname
const elements = document.getElementsByClassName('meine-klasse');
for (let element of elements) {
console.log(element);
}
3. Manipulation von Elementen
a) Textinhalt ändern
const headline = document.getElementById('headline');
headline.innerText = 'Neuer Text';
b) HTML-Inhalt ändern
const container = document.querySelector('.container');
container.innerHTML = '<p>Neuer Absatz</p>';
c) Attribute ändern
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
d) Klassen hinzufügen oder entfernen
const box = document.querySelector('.box');
box.classList.add('aktiv'); // Klasse hinzufügen
box.classList.remove('inaktiv'); // Klasse entfernen
4. Arbeiten mit mehreren Elementen
a) Iteration durch NodeLists
querySelectorAll
gibt eine NodeList zurück, die iteriert werden kann:
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
console.log('Button geklickt:', button.innerText);
});
});
b) HTMLCollections iterieren
HTMLCollections (z. B. von getElementsByTagName
) können mit einer Schleife durchlaufen werden:
const images = document.getElementsByTagName('img');
for (let img of images) {
img.style.border = '2px solid red';
}
5. Fehlerbehandlung
a) Vermeidung von Fehlern bei der Auswahl
- Stelle sicher, dass das Element existiert, bevor du es manipulierst:
const element = document.querySelector('.nicht-existent');
if (element) {
element.innerText = 'Gefunden!';
} else {
console.error('Element nicht gefunden!');
}
b) Umgang mit ungültigen Eingaben
- Fange potenzielle Fehler mit
try-catch
ab:
try {
const json = JSON.parse('{ungültiges JSON}');
console.log(json);
} catch (error) {
console.error('Fehler beim Parsen von JSON:', error.message);
}
c) Debugging-Tipps
- Nutze die Konsole deines Browsers:
console.log('Wert:', variable);
console.error('Fehler:', fehler);
console.warn('Warnung:', warnung);
- Setze Breakpoints in der Entwicklerkonsole, um den Code Schritt für Schritt zu analysieren.
6. Praxis: Dynamische To-Do-Liste erstellen
HTML:
<!DOCTYPE html>
<html>
<head>
<title>To-Do Liste</title>
</head>
<body>
<h1>Meine To-Do Liste</h1>
<input type="text" id="todo-input" placeholder="Neue Aufgabe">
<button id="add-todo">Hinzufügen</button>
<ul id="todo-list"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-todo');
const todoList = document.getElementById('todo-list');
addButton.addEventListener('click', () => {
const task = input.value.trim();
if (task) {
const li = document.createElement('li');
li.innerText = task;
li.addEventListener('click', () => {
li.remove();
});
todoList.appendChild(li);
input.value = '';
} else {
alert('Bitte eine Aufgabe eingeben!');
}
});
Zusammenfassung
In diesem Kapitel haben wir:
- Verschiedene Methoden zur Auswahl von DOM-Elementen kennengelernt.
- Geübt, wie man Elemente manipuliert und Attribute ändert.
- Fehler behandelt und Debugging-Techniken eingesetzt.
- Eine praktische To-Do-Liste erstellt.
Mit diesen Techniken kannst du interaktive und dynamische Inhalte erstellen. Experimentiere weiter, um das DOM besser zu verstehen!