JavaScript Academy · Lektion

Attribute und Klassen ändern

Verwenden Sie setAttribute und die classList-API.

Attribute und Klassen ändern ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Attribute und Klassen

Elemente besitzen Attribute (z. B. href oder data-id) und CSS-Klassen. JavaScript stellt präzise APIs bereit, mit denen Sie beides auslesen und ändern können.

getAttribute

getAttribute liest den Wert eines Attributs als Zeichenkette aus oder gibt null zurück, wenn das Attribut nicht vorhanden ist.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute erstellt ein Attribut oder aktualisiert es. Werte sind immer Zeichenketten.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute und hasAttribute

Verwenden Sie removeAttribute, um ein Attribut zu löschen, und hasAttribute, um seine Existenz zu prüfen.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Eigenschaften und Attribute

Viele Attribute sind auch als Eigenschaften eines Elements vorhanden (z. B. element.id oder input.value). Eigenschaften spiegeln den aktuellen Zustand wider, während Attribute häufig den ursprünglichen HTML-Wert enthalten.

input.value;                 // current value
input.getAttribute("value"); // original default

dataset für data-*

Benutzerdefinierte data-*-Attribute werden über das Objekt dataset mit camelCase-Schlüsseln bereitgestellt.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

Überblick über classList

classList ist ein dynamisches Objekt zur Verwaltung von Klassen, ohne die Zeichenkette className manuell bearbeiten zu müssen.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add und remove

add und remove akzeptieren einen oder mehrere Klassennamen und ignorieren doppelte oder nicht vorhandene Klassen problemlos.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle fügt die Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie vorhanden ist. Dabei wird ein boolescher Wert für den neuen Zustand zurückgegeben. Ein zweites Argument erzwingt das Ein- oder Ausschalten.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains und replace

contains prüft, ob eine Klasse enthalten ist, und replace ersetzt eine Klasse direkt durch eine andere.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Warum classList className überlegen ist

Wenn Sie className als Zeichenkette bearbeiten, besteht die Gefahr, andere Klassen zu überschreiben. classList ändert sicher nur die ausgewählten Klassen.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Schnelltest

Wählen Sie das Verhalten von toggle aus.

Zusammenfassung

Lesen und schreiben Sie Attribute mit getAttribute/setAttribute/removeAttribute/hasAttribute und greifen Sie über dataset auf data-* zu. Verwalten Sie Klassen mit den classList-Methoden add, remove, toggle, contains und replace. Diese sind sicherer, als className zu überschreiben.

Häufig gestellte Fragen

Ist die Lektion „Attribute und Klassen ändern“ kostenlos?

Ja — der vollständige Text von „Attribute und Klassen ändern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Attribute und Klassen ändern“?

Verwenden Sie setAttribute und die classList-API. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Attribute und Klassen ändern“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy