recherche

Maison >interface Web >Tutoriel H5 >Comment utiliser l'ensemble de données H5

Comment utiliser l'ensemble de données H5

php中世界最好的语言
php中世界最好的语言original
2018-03-14 15:15:053339parcourir

Cette fois, je vais vous montrer comment utiliser l'ensemble de données H5 et quelles sont les précautions lors de l'utilisation de l'ensemble de données H5. Ce qui suit est un cas pratique, jetons un coup d'œil.

La norme HTML5 vous permet d'intégrer des attributs similaires à data-* dans des balises d'éléments ordinaires pour obtenir un accès simple aux données. Sa quantité n'est pas limitée, et il peut également être modifié dynamiquement par javascript, et prend également en charge le sélecteur CSS pour le style. Cela rend l’attribut data particulièrement flexible et puissant. Avec de tels attributs, nous pouvons prédéfinir ou stocker des données de manière plus ordonnée et intuitive. Bien sûr, vous pouvez ajouter à volonté n'importe quel attribut personnalisé à n'importe quel élément de balise, et vous pouvez également obtenir leurs valeurs, mais ce n'est pas aussi flexible que cela. Jetons d'abord un coup d'œil aux données de stockage d'attributs aléatoires.

1. Utilisez les éléments setAttribute et getAttribute de l'objet dom node

Exemple : 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>
Document
</title>
 </head>
 <body>
   <span id="music" mtitle="yestoday once more">昨日重现</span>
   <script type="text/javascript">
      var mdoc=document.getElementById(&#39;music&#39;);
 alert(mdoc.getAttribute(&#39;mtitle&#39;));
   </script>
 </body>
</html>

Exécutez ce code, et la valeur correspondant à mtitle pourra être obtenue sur la page. Bien qu'il soit possible d'écrire de cette façon, si vous souhaitez prédéfinir plus d'informations, vous devez utiliser un attribut sémantique data-*. Par exemple, dans l'exemple de tout à l'heure, si vous souhaitez injecter plus de données sur cette chanson dans la musique

, vous pouvez écrire comme ceci : 

<span id="music-latch" class="musique"  
data-date="2013"  
data-genre="Electronic"  
data-album="Settle (Deluxe)"  
data-artist="Disclosure"  
data-composer="Howard Lawrence & Guy Lawrence">  
Latch (feat. Sam Smith)  
  </span>

Accéder aux attributs toujours Vous pouvez utiliser la première méthode : var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album); 🎜>

Mais cette méthode est relativement bas de gamme. Si vous rencontrez plusieurs champs personnalisés data-* et souhaitez obtenir tous les attributs de données à la fois et les regrouper dans des objets, vous devez également créer un boucle, ce qui est un problème très compliqué. Mais nous disposons également de l’API Dataset. 2. Utilisez l'API dataset pour accéder à l'ensemble de données
Grâce à l'API .dataset, nous pouvons obtenir plus facilement tous les champs de données de l'élément et utiliser des objets pour faciliter l'accès et la traversée. Par exemple, pour l'exemple ci-dessus, vous pouvez exécuter : 

 <script type="text/javascript">
   var mdoc=document.getElementById(&#39;music-latch&#39;);
   var ds=mdoc.dataset;
   alert(ds.date+&#39;--&#39;+ds.album);
   </script>

À l'heure actuelle, lorsque nous accédons aux données, nous n'avons pas besoin du "data- " mot-clé. Vous pouvez y accéder directement en utilisant .dataset.name. C'est plus pratique que la méthode ci-dessus. Toutes les modifications apportées peuvent être reflétées dans l'attribut de données de l'élément en temps réel.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser CSS3 pour obtenir des effets stéréoscopiques 3D

Quelques résumés de l'utilisation de DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser la toile pour dessiner le ciel étoilé, la lune, la terre et ajouter du texteArticle suivant：Comment utiliser la toile pour dessiner le ciel étoilé, la lune, la terre et ajouter du texte

Articles Liés

Voir plus