dataset en JavaScript : lire et écrire les attributs data-* d'un élément

Une ligne de tableau affiche une commande, et le bouton qui la supprime doit connaître son identifiant. Où ranger cette information sans la sortir du HTML ?

Le langage prévoit un emplacement officiel pour cela : les attributs data-*, lisibles depuis JavaScript par une seule propriété.

Définition

dataset est une propriété présente sur tout élément HTML, qui donne accès à ses attributs commençant par data-. Chaque attribut y apparaît comme une clé, lisible et modifiable comme celle d'un Object (objet) ordinaire.

// <li data-id="42" data-etat="paye" data-date-envoi="2026-03-14">

const ligne = document.querySelector("li");

console.log(ligne.dataset.id);          // "42"
console.log(ligne.dataset.etat);        // "paye"
console.log(ligne.dataset.dateEnvoi);   // "2026-03-14"

ligne.dataset.etat = "rembourse";       // met l'attribut à jour dans le HTML

La conversion des noms

Le préfixe disparaît, et chaque tiret suivi d'une lettre devient une majuscule. La correspondance est mécanique dans les deux sens.

Écrire dataset.prixTotal crée donc un attribut data-prix-total, visible dans l'inspecteur du navigateur.

Tout y est une chaîne

Un attribut HTML ne stocke que du texte. La valeur lue est toujours un String (chaîne de caractères), même quand elle ressemble à un nombre ou à un booléen, et c'est la source d'erreur la plus courante.

// <div data-quantite="3" data-actif="false">

const bloc = document.querySelector("div");

console.log(bloc.dataset.quantite + 1);           // "31"
console.log(Number(bloc.dataset.quantite) + 1);   // 4

if (bloc.dataset.actif) console.log("passe quand même");

La dernière ligne s'exécute parce que la chaîne "false" se range du côté vrai, comme l'explique Truthy et falsy. Comparez explicitement, avec === "true", plutôt que de vous fier au test direct.

Le compagnon de la délégation

C'est dans la Délégation d'événement que cette propriété prend tout son sens : l'écouteur unique retrouve l'élément visé, puis y lit l'identifiant à traiter.

tableau.addEventListener("click", (event) => {
  const bouton = event.target.closest("[data-id]");
  if (!bouton) return;

  console.log("supprimer la commande", bouton.dataset.id);
});

Questions fréquentes

Un attribut comme idcommande rend le document non conforme, n'apparaît pas dans dataset et peut entrer en collision avec un attribut standardisé plus tard. Le préfixe data- est justement réservé aux besoins propres à une application.

Seulement sous forme de texte, par exemple avec JSON à l'écriture et à la lecture. Cela reste acceptable pour quelques champs, et devient lourd au-delà. Pour associer des données riches à un élément, une WeakMap ou un Map conservé en mémoire est plus adapté.

Oui, et les modifier. Un attribut data-* figure dans le HTML envoyé au navigateur et s'édite en deux clics dans l'inspecteur. Aucun prix, aucun rôle et aucune permission ne doit y être considéré comme fiable : le serveur revérifie systématiquement.