data-* mit dataset in JavaScript auslesen
Lesen und schreiben Sie benutzerdefinierte Datenattribute über die dataset-API
data-* mit dataset in JavaScript auslesen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist die dataset-API?
Jedes HTML-Element stellt seine data-*-Attribute über die Eigenschaft dataset bereit – eine DOMStringMap, die Attributnamen ihren Werten zuordnet, ohne dass Aufrufe von getAttribute() erforderlich sind.
Zuordnung von Attributen zu Eigenschaften
data-user-id wird zu el.dataset.userId. Bindestriche in Attributnamen werden in der dataset-Eigenschaft in camelCase umgewandelt. Der Zugriff auf data-item-count erfolgt über el.dataset.itemCount.
Werte auslesen
Lesen Sie ein Datenattribut aus: const id = el.dataset.userId. Alle dataset-Werte sind Zeichenfolgen – konvertieren Sie numerische Werte bei Bedarf mit Number() oder parseInt(). Nicht vorhandene Attribute geben undefined zurück, nicht null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Werte schreiben
Setzen Sie ein Datenattribut über dataset: el.dataset.state = "active". Dadurch wird das HTML-Attribut data-state erstellt oder aktualisiert. Die Attributänderung wird sofort im DOM widergespiegelt und kann von MutationObserver beobachtet werden.
Werte löschen
Löschen Sie ein Datenattribut: delete el.dataset.userId. Das entsprechende Attribut data-user-id wird aus dem Element entfernt. Für eine ausdrückliche Entfernung können Sie auch el.removeAttribute("data-user-id") verwenden.
dataset durchlaufen
dataset ist eine DOMStringMap – durchlaufen Sie sie mit einer for...in-Schleife oder wandeln Sie sie mit dem Spread-Operator in Object.entries um: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Das ist nützlich, um alle Datenattribute eines Elements gesammelt auszulesen.
dataset für den Komponentenstatus verwenden
Speichern Sie den leichtgewichtigen Status einer Komponente in Datenattributen statt in ausgeblendeten Eingabefeldern oder JavaScript-Variablen. Eine Tab-Komponente speichert den Index des aktiven Tabs in data-active-tab am Container. So kann jedes Skript darauf zugreifen, ohne dass eine gemeinsame Variable erforderlich ist.
Ereignisdelegation mit dataset
Fügen Sie bei einer Liste von Elementen dem Container genau einen Click-Listener hinzu. Lesen Sie beim Klicken das dataset des angeklickten Ziels aus: e.target.closest("[data-id]").dataset.id. Ein Listener verarbeitet alle Elemente, ohne dass für jedes Element zusätzlicher Bindungsaufwand entsteht.
dataset vs. benutzerdefinierte Eigenschaften
Verwenden Sie dataset für Daten, die aus dem HTML ausgelesen werden müssen (serverseitig gerenderte Metadaten, auf die CSS-Selektoren zugreifen können). Verwenden Sie JavaScript-Variablen für flüchtigen Laufzeitstatus, der nicht im HTML sichtbar sein muss. Die Kombination beider Ansätze erhöht die Komplexität unnötig.
Vorsicht bei der Typumwandlung
dataset gibt immer Zeichenfolgen zurück. el.dataset.active === true ist immer falsch – vergleichen Sie stattdessen mit el.dataset.active === "true" oder konvertieren Sie den Wert: el.dataset.active === "true". Für einen booleschen Status in dataset ist ein Vergleich mit einer Zeichenfolge erforderlich.
dataset vs. getAttribute
Beide Methoden lesen Datenattribute aus. dataset ist für den Zugriff in camelCase praktischer; bei getAttribute muss der vollständige Attributname einschließlich des Präfixes „data-“ angegeben werden. Bevorzugen Sie dataset in modernem Code; verwenden Sie getAttribute, wenn Sie neben Datenattributen auch andere Attribute durchlaufen.
Wissenscheck
Wie erscheint das HTML-Attribut data-user-id im JavaScript-dataset-Objekt?
Zusammenfassung
Die dataset-API ordnet data-*-Attribute camelCase-JavaScript-Eigenschaften zu und ermöglicht so einfachen Lese-, Schreib- und Löschzugriff. Sie unterstützt das Speichern des Komponentenstatus, Muster zur Ereignisdelegation und die Datenübergabe vom Server an den Client – ohne ausgeblendete Eingabefelder oder globale Variablen.
Häufig gestellte Fragen
Ist die Lektion „data-* mit dataset in JavaScript auslesen“ kostenlos?
Ja — der vollständige Text von „data-* mit dataset in JavaScript auslesen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „data-* mit dataset in JavaScript auslesen“?
Lesen und schreiben Sie benutzerdefinierte Datenattribute über die dataset-API Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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 2 von 4.
Wie lange dauert die Lektion „data-* mit dataset in JavaScript auslesen“?
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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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
- data-*-Syntax und Benennungskonventionen
- data-* mit dataset in JavaScript auslesen
- data-* mit CSS-Attributselektoren verwenden
- Praxisnahe Muster: Tooltips und Zustandsverwaltung