DOM & Web-APIs

Im Browser verbindet JavaScript deinen Code mit der Seite. Über das DOM (Document Object Model) liest und änderst du HTML-Elemente. Über Web-APIs wie fetch oder localStorage greifst du auf Netzwerk und Speicher zu. Diese APIs gehören nicht zur Sprache selbst. Sie kommen von der Laufzeitumgebung, deshalb fehlen sie in Node.js teilweise.

Elemente finden und verändern

querySelector gibt das erste passende Element zurück oder null, wenn nichts passt. querySelectorAll gibt eine statische NodeList zurück. Für reinen Text nimmst du besser textContent als innerHTML. So verhinderst du XSS-Lücken.

const list = document.querySelector('#todos');
const items = document.querySelectorAll('.todo');

items.forEach((el) => el.classList.toggle('done'));

const li = document.createElement('li');
li.textContent = 'Neue Aufgabe';
li.dataset.id = '42';
list?.append(li);

Events behandeln

Mit addEventListener registrierst du Handler. Bei Event Delegation genügt ein einziger Listener am Elternelement. Er greift auch für Kinder, die erst später hinzukommen. Mit einem AbortController kannst du mehrere Listener auf einmal entfernen.

const controller = new AbortController();

list.addEventListener('click', (event) => {
  const item = event.target.closest('.todo');
  if (!item) return;
  console.log(`Klick auf ${item.dataset.id}`);
}, { signal: controller.signal });

// später: alle Listener mit diesem Signal entfernen
controller.abort();

Daten laden mit fetch

fetch gibt ein Promise zurück. Achtung: HTTP-Fehler wie 404 oder 500 lassen das Promise nicht scheitern. Es wird nur bei Netzwerkfehlern abgelehnt. Prüfe deshalb response.ok selbst.

const loadUser = async (id) => {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { name, email } = await res.json();
  return { name, email };
};

Praxistipps

• Binde Skripte mit defer oder type="module" ein. Dann ist das DOM schon fertig aufgebaut, wenn dein Code läuft.
• localStorage speichert nur Strings und arbeitet synchron. Objekte wandelst du vorher mit JSON.stringify um.