data-*-Attribute ermöglichen es Ihnen, benutzerdefinierte, private Daten auf jedem HTML-Element zu speichern. Sie sind eine standardmäßige Möglichkeit, Metadaten an das DOM anzuhängen, die JavaScript lesen kann, ohne nicht-standardisierte Attribute oder Klassen zu missbrauchen.
Edit
datasetconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
Zwei wichtige Regeln: data-user-role wird als dataset.userRole aufgerufen (Bindestriche werden zu camelCase), und jeder Wert ist ein String — konvertieren Sie nach Bedarf (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
Die ID auf jedem Element zu speichern bedeutet, dass ein Listener auf dem Parent alle Elemente verarbeiten kann.
data-* ist der saubere, standardkonforme Weg, um Serverdaten in das DOM für clientseitiges JavaScript zu übergeben (ohne zusätzliche API-Aufrufe), um Event Delegation einzurichten und CSS-Status zu steuern — ohne nicht-standardisierte Attribute zu erfinden, die das HTML ungültig machen würden.
Speichern Sie dort keine großen oder sensiblen Daten; diese sind im Markup sichtbar.