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

Die data-*-Attribute in HTML werden empfohlen, um benutzerdefinierte Daten zu speichern, die keine visuelle Darstellung haben, direkt innerhalb der DOM-Elemente. Dies ermöglicht:

• Kleine Datenmengen, die mit dem Element verbunden sind, zu speichern: Zum Beispiel die Produkt-ID, den Status des Elements, die Widget-Einstellungen.
• Den Zugriff und die Manipulation der Daten mit JavaScript zu vereinfachen: Die Daten können leicht über element.dataset abgerufen und geändert werden.

// Daten abrufen
const meinElement = document.getElementById('mein-element');
const elementId = meinElement.dataset.elementId; // Wert des data-element-id-Attributs erhalten

// Daten setzen
meinElement.dataset.status = 'active'; // Wert des data-status-Attributs setzen

• Semantische Klassen vermeiden: Die Verwendung von Klassen zur Speicherung von Daten (z.B. .status-active) kann den Code weniger lesbar und schwerer wartbar machen.
• Die Leistung in bestimmten Szenarien verbessern: Der Zugriff auf Daten über dataset kann schneller sein als das Parsen von String-Attributen oder die Arbeit mit versteckten Elementen.
• Diese Daten in CSS-Selektoren verwenden:

/* Elemente mit einem bestimmten Status auswählen */
[data-status="active"] {
  border: 1px solid green;
}

Es ist wichtig, data-*-Attribute für Daten zu verwenden, die keine andere geeignete semantische HTML-Attribute haben. Für Daten, die für Suchmaschinen oder andere Parser zugänglich sein sollen, sollten entsprechende semantische Elemente und Attribute verwendet werden.