Méthode data

La méthode data permet de lier des données de tout type aux éléments DOM de manière sécurisée, ce qui permet d'éviter les fuites de mémoire. Nous pouvons définir plusieurs valeurs différentes pour un élément et les récupérer plus tard. L'utilisation de la méthode data pour mettre à jour les données n'affecte pas les attributs dans le DOM.

Syntaxe

Voici comment nous définissons une valeur pour un élément avec une clé, par laquelle il pourra être retrouvé plus tard :

.data(clé, valeur);

Nous pouvons également passer un objet, qui contient des paires clé-valeur pour mettre à jour les données :

.data(objet);

Il est possible de récupérer les données associées au premier élément de la collection jQuery, en ne passant que la clé :

.data(clé);

Sans passer aucun paramètre, nous pouvons lire les données précédemment liées aux éléments DOM. La méthode renverra un objet JavaScript, contenant chaque valeur sous forme de propriété :

.data();

Exemple

Utilisons data pour définir des données pour la balise p, en passant comme premier paramètre 'test' et la valeur 21 pour le second. Ensuite, lisons les données enregistrées avec la clé 'test' :

<p>text</p>

$('p').data('test', 21); // ici les données sont écrites

console.log($('p').data('test')); // affichera le nombre 21
console.log($('p').data()); // affichera l'objet {test: 21}

Voir aussi

la méthode removeData,
qui supprime les données d'un élément
la méthode hasData,
qui vérifie la présence de données dans un élément
la méthode attr,
qui permet d'obtenir et de modifier n'importe quel attribut d'un élément
La propriété JavaScript dataset,
qui permet d'ajouter ses propres attributs aux balises