如何使用H5的dataset

php中世界最好的语言原創: 2018-03-14 15:15:053475瀏覽

這次帶給大家如何使用H5的dataset，使用H5的dataset的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML5標準允許你在普通的元素標籤裡，嵌入類似data-*的屬性，來實現一些簡單資料的存取。它的數量不受限制，也能由javascript動態修改，也支援CSS選擇器進行樣式設定。這使得data屬性特別靈活，也非常強大。有了這樣的屬性我們能夠更有序直觀的進行資料預設或儲存。當然，任何的標籤元素裡面可以隨意的加上任何自訂屬性，也可以取得他們的值，但沒有這個來的彈性。我們先來看看隨意的屬性儲存資料吧。

1.利用dom節點物件的setAttribute與getAttribute

範例：

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

運行這段程式碼，頁面上可以取得mtitle對應的值。這樣寫雖然可以，但是想要預置更多的信息，應該採用一個語意屬性data-*。例如剛才例子，想給音樂

注入更多關於這首歌數據，可以這樣寫：

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

存取屬性還是可以採用第一種方式：var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album);

#但是這種方法比較低端，如果遇到多個data-*自訂字段，想要一次全部取得所有的data屬性並包裝成物件的話，還必須做一個循環，很麻煩。不過我們還有Dataset API可用。
2. 利用 dataset API 訪問 dataset
通過.dataset API，我們可以更方便的獲取元素的所有data字段，並以對象的方式，方便訪問和遍歷。例如，對於上面的例子，可以運行：

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

這時候我們在存取data時，就不需要"data-"關鍵字了，直接利用.dataset.name就可以存取。這比上面的方法更方便。所做的任何更改，都是可以即時反映到元素data屬性上的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！