Cet article expliquera l'utilisation des attributs de données en JavaScript.
Comment utiliser les attributs de données en JavaScript ?
En JavaScript, le « données 'Les attributs sont utilisés pour stocker des informations supplémentaires qui ne s'affichent pas sur la page Web. Ces informations peuvent être écrites, consultées, lues et modifiées dynamiquement en fonction des besoins de l’utilisateur. Cette section a effectué la tâche discutée pratiquement sur les attributs des données.
Syntaxe
< données d'élément -*= 'une certaine valeur' >
Dans la syntaxe ci-dessus :
- ' élément » représente l'élément HTML dans lequel l'attribut data est utilisé.
- ' données-* ' désigne les attributs de données multiples (*) commençant par le préfixe (data-), c'est-à-dire le mot-clé data suivi d'un trait d'union.
- une valeur : Il spécifie la valeur de l'attribut data.
Maintenant, utilisez la syntaxe ci-dessus pour créer un attribut de données.
Créer des attributs de données
< identifiant div = 'maDiv' données - nom = 'Alvin' données - âge = '40' données - genre = 'mâle' > div >Le code HTML d'une ligne indiqué crée ce qui suit : « nom-donnée ', ' l'ère des données ', et le ' données-genre ' Attributs à l'intérieur de l'élément ' div ' dont l'identifiant est ' myDiv '.
Lisons/accédons aux attributs de données créés.
Exemple 1 : Lire/accéder à l'attribut de données à l'aide de la propriété « dataset »
Cet exemple applique la propriété « dataset » pour lire/accéder aux attributs de données spécifiques ou à tous.
Tout d’abord, regardez le « bouton ' élément qui appelle le ' jsFunc() 'quand c'est associé' sur clic ' L'événement est déclenché lors d'un clic sur le bouton :
< bouton surcliquez = 'jsFunc()' > Accéder à l'attribut de données bouton >Passons maintenant à la définition de « jsFunc() » :
< scénario >fonction jsFunc ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
console. enregistrer ( élément. base de données ) ;
}
scénario >
Dans les lignes de code ci-dessus :
- Le ' jsFunc() ' déclare d'abord une variable 'elem' qui applique le ' document.getElementById() ' pour accéder à l'élément div ajouté via son identifiant ' myDiv '.
- Ensuite, il utilise le « console.log() ' méthode qui utilisera le ' base de données ' pour accéder aux attributs de données de l'élément div consulté et les afficher dans la console Web.
Sortir
Appuyez sur F12 pour ouvrir la console Web :
On peut voir qu'en cliquant sur le bouton donné, la console affiche un ' DOMSstringMap ' contenant tous les attributs de données de l'élément div.
Accéder à une valeur spécifique
Si l'utilisateur souhaite accéder à l'attribut de données spécifique, spécifiez son nom avec la propriété « dataset » comme ceci :
< scénario >fonction obtenir ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
console. enregistrer ( élément. base de données . nom ) ;
}
scénario >
À ce stade, les attributs de données « nom » sont accessibles à l'aide du « base de données ' propriété.
Sortir
On peut voir que la console affiche uniquement la valeur des attributs de données spécifiés lors d'un clic sur le bouton.
Exemple 2 : Lire/accéder à un attribut de données à l'aide de la méthode « getAttribute() »
Cet exemple utilise la méthode « getAttribute() » pour lire/accéder aux attributs de données.
Dans ce scénario, l'élément bouton du premier exemple est également inclus :
< bouton surcliquez = 'jsFunc()' > Accéder à l'attribut de données bouton >Voyons la fonctionnalité de la méthode « getAttribute() » :
< scénario >fonction jsFunc ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
console. enregistrer ( élément. getAttribute ( 'nom-donnée' ) ) ;
console. enregistrer ( élément. getAttribute ( 'l'ère des données' ) ) ;
console. enregistrer ( élément. getAttribute ( 'données-genre' ) ) ;
}
scénario >
Dans l'extrait de code ci-dessus :
- La variable « elem » applique le « document.getElementById() ' pour accéder à l'élément div ajouté en utilisant son identifiant ' myDiv '.
- Ensuite, le « console.log() ' La méthode utilise le ' getAttribute() ' pour obtenir la valeur de l'attribut ' data ' spécifiée de l'élément div récupéré, puis l'afficher dans la console Web.
- La même tâche est effectuée pour accéder aux attributs de données spécifiés restants.
Note: La méthode « getAttribute() » spécifie l'attribut data avec le préfixe « data » suivi d'un trait d'union (-), c'est-à-dire (data-) qui n'est pas requis lors de l'utilisation de la propriété « dataset() ».
Sortir
La sortie ci-dessus affiche toutes les valeurs d'attribut de données spécifiées en cliquant sur le bouton.
Exemple 3 : écrire un attribut de données à l'aide de la propriété « dataset »
Cet exemple écrit les attributs de données à l'aide de la propriété « dataset ».
Le contenu de l'élément bouton est modifié en fonction du scénario actuel :
< bouton surcliquez = 'jsFunc()' > Écrire un attribut de données bouton >Maintenant, écrivez le nouvel attribut data dans l'élément div ajouté :
< scénario >fonction jsFunc ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
élément. base de données . identifiant = 'personne'
console. enregistrer ( élément. base de données ) ;
}
scénario >
Dans le bloc de code ci-dessus :
- Le ' base de données ' La propriété écrit un nouveau nom d'attribut de données 'id' avec une valeur de chaîne spécifiée.
- Ensuite, le « conolse.log() ' utilise la propriété ' dataset ' pour afficher l'interface ' DOMStringMap ' contenant l'attribut de données nouvellement écrit dans la console Web.
Sortir
Ici, la console affiche le « DOMStringMap » contenant le nouvel attribut de données « id » écrit à l'aide de la propriété « dataset ».
Exemple 4 : Mettre à jour la valeur de l'attribut de données
Cet exemple met à jour la valeur existante d'un attribut de données spécifique à l'aide de la propriété « dataset ».
Le texte de l'élément bouton est modifié selon le scénario donné :
< bouton surcliquez = 'jsFunc()' > Mettre à jour l'attribut de données bouton >Passons maintenant à la section JavaScript :
< scénario >fonction jsFunc ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
élément. base de données . nom = 'John'
console. enregistrer ( élément. base de données . nom ) ;
}
scénario >
Dans le bloc de code ci-dessus, la valeur de l'attribut de données « nom » spécifiée est mise à jour à l'aide de « base de données ' propriété.
Sortir
La console affiche la valeur mise à jour des attributs de données spécifiés lors d'un clic sur le bouton.
Exemple 5 : Supprimer l'attribut de données
Cet exemple supprime l'attribut de données spécifique en utilisant le mot-clé « delete ».
Le texte de l'élément bouton est modifié selon les exigences :
< bouton surcliquez = 'jsFunc()' > Supprimer l'attribut de données bouton >Maintenant, suivez le bloc de code JavaScript :
< scénario >fonction jsFunc ( ) {
const élément = document. getElementById ( 'maDiv' ) ;
supprimer un élément. base de données . âge ;
console. enregistrer ( élément. base de données . âge ) ;
}
scénario >
L'extrait de code ci-dessus spécifie le ' supprimer ' avec la propriété ' dataset ' pour supprimer l'attribut de données consulté.
Sortir
On observe que la console affiche « indéfini ' sur un clic de bouton qui vérifie clairement que l'attribut de données consulté a été supprimé.
Conclusion
En JavaScript, les attributs de données peuvent être utilisés de différentes manières, comme les lire, y accéder, les écrire, les mettre à jour et les supprimer selon les besoins. Toutes ces tâches peuvent être effectuées à l'aide du ' base de données ' propriété. Cependant, l'utilisateur peut également accéder aux attributs de données un par un à l'aide du bouton « getAttribute() ' méthode. Cet article a expliqué pratiquement l'utilisation des attributs de données en JavaScript.