How to use H5 dataset-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to use H5 dataset

php中世界最好的语言

Mar 14, 2018 pm 03:15 PM

dataset html5 use

This time I will show you how to use the H5 dataset, what are the precautions when using the H5 dataset, the following is a practical case, let's take a look.

The HTML5 standard allows you to embed attributes similar to data-* in ordinary element tags to achieve some simple data access. Its quantity is not limited, and it can also be dynamically modified by javascript, and also supports CSS selector for style setting. This makes the data attribute particularly flexible and powerful. With such attributes, we can preset or store data in a more orderly and intuitive manner. Of course, you can add any custom attributes to any tag element at will, and you can also get their values, but it is not as flexible as this. Let's take a look at random attribute storage data first.

1. Use the setAttribute and getAttribute of the dom node object

Example:

<!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>

Copy after login

Run this code and you can get the value corresponding to mtitle on the page. Although it is possible to write this way, if you want to preset more information, you should use a semantic attribute data-*. For example, in the example just now, if you want to inject more data about this song into the music

, you can write like this:

<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>

Copy after login

You can still use the access attribute The first way: var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album);

However, this method is relatively low-end. If you encounter multiple data-*custom fields and want to obtain all data attributes at once and package them into objects, you must also make a loop, which is very troublesome. But we also have the Dataset API available.
2. Use the dataset API to access dataset
Through the .dataset API, we can more conveniently obtain all the data fields of the element, and use objects to facilitate access and traversal. For example, for the above example, you can run:

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

Copy after login

At this time, when we access the data, we do not need the "data-" keyword and use it directly .dataset.name can be accessed. This is more convenient than the above method. Any changes made can be reflected in the element's data attribute in real time.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!