Les attributs data-* vous permettent de stocker des données personnalisées et privées sur n'importe quel élément HTML. C'est un moyen standard d'attacher des métadonnées au DOM que JavaScript peut lire, sans abuser des attributs non standard ou des classes.
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
Deux règles clés : data-user-role est accessible en tant que dataset.userRole (les tirets deviennent du camelCase), et chaque valeur est une chaîne — convertissez selon les besoins (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);
});
Storez l'id sur chaque élément signifie qu'un listener sur le parent peut gérer tous les éléments.
data-* est le moyen propre et conforme aux normes de passer les données du serveur dans le DOM pour JS côté client (sans appel API supplémentaire), de configurer la délégation d'événements, et de piloter l'état CSS — sans inventer d'attributs non standard qui rendraient le HTML invalide.
Ne stockez pas de grandes quantités de données ou de données sensibles là ; elles sont visibles dans le balisage.