dataset屬性

有時，需要在HTML元素上附加資料，供JavaScript指令碼使用。一種解決方法是自定義屬性。

<div id="mydiv" foo="bar">

上面程式碼為div元素自定義了foo屬性，然後可以用getAttribute()和setAttribute()讀寫這個屬性。

var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')

這種方法雖然可以達到目的，但是會使得HTML元素的屬性不符合標準，導致網頁的HTML程式碼通不過校驗。

更好的解決方法是，使用標準提供的data-*屬性。

<div id="mydiv" data-foo="bar">

然後，使用元素節點物件的dataset屬性，它指向一個物件，可以用來操作HTML元素標籤的data-*屬性。

var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'

上面程式碼中，通過dataset.foo讀寫data-foo屬性。

刪除一個data-*屬性，可以直接使用delete命令。

delete
 
 document.getElementById('myDiv').dataset.foo;

除了dataset屬性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*屬性。

注意，data-後面的屬性名有限制，只能包含字母、數字、連詞線（-）、點（.）、冒號（:）和下劃線（_)。而且，屬性名不應該使用A到Z的大寫字母，比如不能有data-helloWorld這樣的屬性名，而要寫成data-hello-world

轉成dataset的鍵名時，連詞線後面如果跟著一個小寫字母，那麼連詞線會被移除，該小寫字母轉為大寫字母，其他字元不變。反過來，dataset的鍵名轉成屬性名時，所有大寫字母都會被轉成連詞線+該字母的小寫形式，其他字元不變。比如，dataset.helloWorld會轉成data-hello-world。