Attributs personnalisés en JavaScript

En HTML, il est permis d'ajouter ses propres attributs personnalisés aux balises. De tels attributs doivent commencer par data-, suivi de n'importe quel nom d'attribut qui vous convient.

Les attributs personnalisés peuvent être utilisés de nombreuses manières différentes. Nous étudierons beaucoup de ces méthodes plus loin dans le tutoriel, et vous pourrez en inventer encore plus par vous-même à l'avenir.

L'accès à ces attributs n'est pas standard. On ne peut pas simplement accéder à une propriété du même nom de l'élément, comme nous le faisions auparavant, il faut utiliser une propriété spéciale dataset, après laquelle, via un point, on écrit le nom de l'attribut sans data-. Par exemple, si notre attribut s'appelle data-test, pour y accéder nous écrirons elem.dataset.test, où elem est la variable contenant notre élément.

Regardons un exemple. Supposons que nous ayons l'élément suivant :

<div id="elem" data-num="1000"></div>

Affichons à l'écran la valeur de son attribut data-num :

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // affichera 1000

Et maintenant, attribuons une autre valeur à cet attribut :

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

Voici le code suivant :

<div id="elem" data-text="str">text</div>

Faites en sorte qu'un clic sur la div ajoute à la fin de son texte le contenu de son attribut data-text.

Des divs sont données, contenant dans l'attribut data-num leur numéro d'ordre :

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Faites en sorte qu'un clic sur n'importe laquelle des divs écrive son numéro d'ordre à la fin.

Un bouton est donné. Faites en sorte que ce bouton compte le nombre de clics dessus, en les enregistrant dans un attribut personnalisé. Qu'un clic sur un autre bouton affiche à l'écran le nombre de clics qui ont été faits sur le premier bouton.

Une input est donnée :

<input id="elem" data-length="5">

Dans cette input, l'attribut data-length contient le nombre de caractères qui doivent être saisis dans l'input. Faites en sorte qu'à la perte du focus, si le nombre de caractères saisis ne correspond pas à celui spécifié, un message soit affiché à ce sujet.

Une input est donnée :

<input id="elem" data-min="5" data-max="10">

Dans cette input, les attributs data-min et data-max contiennent une plage. Faites en sorte qu'à la perte du focus, si le nombre de caractères saisis ne se situe pas dans cette plage, un message soit affiché à ce sujet.