Que sont les attributs data-* et comment les lire ?

Question

IT Interview Practice · Accepted Answer

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. ```html ``` ## Lecture en JavaScript via `dataset` ```js const 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"`). ## Lecture en CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## Un motif courant : délégation d'événements ```js 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. ## Pourquoi c'est important `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.

Lecture en JavaScript via dataset

Lecture en CSS

Un motif courant : délégation d'événements

Pourquoi c'est important

Questions connexes

Lecture en JavaScript via `dataset`