HTML5 數據集屬性dataset

　　有時候在HTML元素上綁定一些額外信息，特別是JS選取操作這些元素時特別有幫助。通常我們會使用getAttribute()和setAttribute()來讀和寫非標題屬性的值。但為此付出的代價是文檔將不再是合法有效的HTML。

　　對此,HTML5提供了一個解決方案。在HTML5文檔中，任意以"data-"為前綴的小寫的屬性名字都是合法的。這些“數據集屬性”將不會對其元素的表現產生影響，它們定義了一種標准的、附加額外數據的方法，並不是在文檔合法性上做出讓步。

　　HTML5還在Element對象上定義了dataset屬性。該屬性指代一個對象，它的各屬性對應於去掉前綴的data-屬性。因此dataset.x應該保存data-x屬性的值。帶連字符的屬性對應於駝峰命名法屬性名。如Element屬性data-jquery-test在js中對應於dataset.jqueryTest屬性。

　　注意，dataset屬性是Element的data-屬性的實時、雙向接口。設置或刪除dataset的一個屬性就等同於設置或移除對應元素的data-屬性。

var top1=document.getElementById("top1");
var ds=top1.dataset;
//Element為<span id="top1" data-jquery-test="lalala">你好！</span>
console.log(ds.jqueryTest);//lalala
                
ds.jqueryTest='hello!';
//Element為<span id="top1" data-jquery-test="hello!">你好！</span>
console.log(top1.getAttribute("data-jquery-test"));//hello!
                
top1.setAttribute("data-jquery-test2","hello2");
//Element為<span id="top1" data-jquery-test="hello!" data-jquery-test2="hello2">你好！</span>
console.log(ds.jqueryTest2);//hello2
                
delete ds.jqueryTest2;
//<span id="top1" data-jquery-test="hello!">你好！</span>
console.log(top1.getAttribute("data-jquery-test2"));//null

　　來源於《JavaScript權威指南》 15.4.3