Wofür wird empfohlen, die data-Attribute in HTML zu verwenden?

Die data-*-Attribute werden verwendet, um beliebige Daten zu speichern, die mit einem bestimmten HTML-Element verbunden sind, ohne dass Standard-Attribute oder DOM-Eigenschaften verwendet werden müssen.

Hauptvorteile:

• Semantisch korrekt: Sie sind Teil des HTML5-Standards und verletzen nicht die Gültigkeit des Dokuments.
• Einfacher Zugriff: Der Zugriff auf die Daten erfolgt über die Eigenschaft dataset in JavaScript, die ein Objekt mit Schlüsseln zurückgibt, die den Teilen des Attributs nach data- entsprechen.
• Bequem für JavaScript/CSS: Ermöglichen es, bestimmte Daten an Elemente zu binden, die dann in JavaScript-Logik oder für CSS-Styling (mit Attributselektoren) verwendet werden können.
• Trennung von Daten und Präsentation: Helfen, die HTML-Struktur von den Daten zu trennen, die für Verhalten oder Darstellung verwendet werden können.

Anwendungsbeispiele:

• Speicherung der ID eines Eintrags in der Datenbank.
• Speicherung von Parametern für ein Popup oder einen modalen Dialog.
• Bestimmung des Zustands eines Elements (z.B. data-state="active").
• Übertragung kleiner Datenmengen vom Backend an das Frontend für die Verwendung in JavaScript.

Beispiel für den Zugriff in JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Zugriff auf "123"
const category = element.dataset.category; // Zugriff auf "electronics"