Utiliser la propriété dataset en JavaScript

Développeur PHP à Vendôme (41100) > Utiliser la propriété dataset

L'architecture ajax et la propriété dataset sont deux outils indispensables à l'interactivité d'un site, la première car elle permet de contrôler le lien entre le site et le serveur, la seconde en permettant d'associer des données à n'importe quel élément d'une page, leur utilisation en binôme ouvrant la voie à d'infinies possibilités. Comme il serait fastidieux de traiter les deux sujets au sein d'un même article, arrêtons-nous d'abord sur la propriété dataset.

Créer un attribut dataset

Concrètement, la propriété dataset permet d'intégrer ses propres attributs au sein de n'importe quelle balise HTML, la valeur d'un tel attribut ayant vocation à guider une action pilotée via javascript.

Autant le nom de l'attribut dataset que sa valeur sont libres, la seule règle à respecter est de faire commencer le nom de l'attribut par "data-".

Si l'on dispose par exemple de plusieurs types de liens dans une page, ils peuvent être identifiés par un attribut "data-typelien":

  • Avant: <a href="https://feu-sacre.net/">Le Feu Sacré</a>
  • Après: <a href="https://feu-sacre.net/" data-typelien="type1">Le Feu Sacré</a>

Lire un attribut dataset

Parmi les différents types de liens, imaginons qu'il y en ait un requérant une confirmation lorsque l'internaute clique, faute de quoi le lien n'est pas ouvert. Attribuons alors à data-typelien la valeur "confirmation" et partons à sa recherche parmi tous les liens:


//vérification que la page a fini de charger
window.addEventListener('DOMContentLoaded',function(){

//récupération de toutes les balises <a>
balise = document.getElementsByTagName('a');

for(x=0;x<balise.length;x++){

//si ce lien dispose d'un typelien
if(balise[x].dataset.typelien){

//si le typelien a pour valeur "confirmation"
if(balise[x].dataset.typelien == 'confirmation'){

balise[x].onclick = function(){

if(!confirm('message')){

return false;

}

}

}

}

}

});

Analyser toutes les balises

Dans le cas où différentes balises peuvent contenir un attribut dataset, afin de ne pas trop s'éparpiller, il vaut a priori mieux centraliser les récupérations d'attributs dans un seul code, plutôt que d'en créer un par balise comme ci-dessus. Pour ce faire, utilisons un tableau de l'ensemble des balises susceptibles d'être concernées:


//vérification que la page a fini de charger
window.addEventListener('DOMContentLoaded',function(){

//balises susceptibles d'être concernées - à adapter selon les besoins
balises = new Array('span','div','ul','ol','li','a','img');

for(z=0;z<balises.length;z++){

balise = document.getElementsByTagName(balises[z]);

for(x=0;x<balise.length;x++){

}

}

});

Par , publié sur feu-sacre.net le 26-03-2019

Commentaires des internautes

Cliquer ici pour publier un commentaire (aucune inscription requise).