HTMLElement.
Un objet avec les valeurs des attributs data-* d’un élément, pour lire et écrire vos propres données.
- Renvoie
- Un objet
DOMStringMapavec les valeurs des attributsdata-*enregistrées comme des chaînes.
Exemple
#const course = document.querySelector('#course')
console.log(course.dataset.courseId)
console.log(Number(course.dataset.price) * 2)
console.log(course.dataset.premium === 'true')
console.log(course.dataset)Définition et utilisation
#Les attributs qui commencent par data- permettent d’enregistrer dans le HTML vos propres informations, par ex. l’identifiant d’un cours ou le prix d’un produit. La propriété dataset les expose comme un objet : l’attribut data-course-id est accessible via dataset.courseId. Les segments du nom après les tirets commencent par une majuscule (notation camelCase).
Toutes les valeurs de dataset sont des chaînes. Un nombre doit être converti avec Number(), et une valeur booléenne comparée à une chaîne, par ex. dataset.premium === "true". Affecter une nouvelle valeur crée ou modifie l’attribut dans le HTML, et delete element.dataset.nom le supprime.
Les attributs data-* sont parfaits pour la délégation d’événements : une seule fonction gère plusieurs boutons, et chaque bouton transporte l’information sur ce qu’il concerne. Vous pouvez aussi styliser des éléments en CSS avec un sélecteur d’attribut, par ex. [data-status="done"].
Syntaxe
#element.dataset.name
element.dataset.name = value
delete element.dataset.namePlus d’exemples
#const task = document.querySelector('#task')
task.dataset.status = 'done'
task.dataset.completedAt = '2026-09-28'
console.log(task.getAttribute('data-status'))
console.log(task.getAttribute('data-completed-at'))
delete task.dataset.completedAt
console.log(task.hasAttribute('data-completed-at'))const shop = document.querySelector('#shop')
shop.addEventListener('click', (event) => {
const { item, cost } = event.target.dataset
if (!item) return
console.log(`Achat : ${item} pour ${cost} pièces`)
})
shop.querySelector('[data-item="theme"]').click()Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’oubliez pas que
datasetrenvoie des chaînes.dataset.price + 1donnera"491", et non50. Convertissez la valeur avecNumber(). - En HTML, écrivez les noms en minuscules avec des tirets (
data-course-id), et en JavaScript, lisez-les en notation camelCase (dataset.courseId). - Ne stockez pas de données sensibles dans
data-*. N’importe qui peut les voir dans le code de la page.
Entrées associées
#- Element.setAttribute()Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- Number.parseInt()Convertit le début d’une chaîne de caractères en nombre entier dans la base choisie.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.