這次帶給大家如何使用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('music');
alert(mdoc.getAttribute('mtitle'));
</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('music-latch'); var ds=mdoc.dataset; alert(ds.date+'--'+ds.album); </script>
這時候我們在存取data時，就不需要"data-"關鍵字了，直接利用.dataset.name就可以存取。這比上面的方法更方便。所做的任何更改，都是可以即時反映到元素data屬性上的。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是如何使用H5的dataset的詳細內容。更多資訊請關注PHP中文網其他相關文章！
