以前我們需要自定義屬性的時候一般是這樣做的，在標籤裏面加上我們自己設置的一些屬性：
<div id="myDiv" user-defined-attribute="value">在標籤裏設置自定義屬性</div>
然後獲取裏面的值是使用getAttribute來獲取自定義屬性裏面的值：
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
現在H5爲我們提供了一個data屬性——“data-”前綴，可以讓所有的HTML元素支持自定義屬性，只要在標籤裏面以”data-”爲前綴定義我們的自定義屬性就可以用來進行一些數據的存放。
<div id="myDiv" data-attribute="value">在標籤裏設置H5新增的自定義屬性</div>
這個data屬性還可以應用在CSS中，前提是你的瀏覽器支持after僞類，以及content的attr屬性（低版本的IE不支持）：
<div id="myDiv" data-attribute="屬性值">data屬性應用於CSS中</div>
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}
如何獲取data屬性的值？
<div id="myDiv" data-attribute="value">在標籤裏設置H5新增的自定義屬性</div>
一、使用getAttribute來獲取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
二、使用Html5自定義屬性對象Dataset來獲取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.dataset.attribute;
注意：帶連字符連接的名稱在使用的時候需要命名駝峯化，即大小寫組合書寫，這與應用元素的style對象類似，dom.style.borderColor。例如data屬性爲data-other-attribute，則我們要獲取相應的值可以使用：myDiv.dataset.otherAttribute
如果Html元素定義了多個自定義屬性，如何獲取？
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標籤裏設置多個自定義屬性</div>
一、使用循環遍歷
var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == 'data-') {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
}
二、使用dataset屬性
var expense = document.getElementById('myDiv').dataset;
注：dataset並不是典型意義上的JavaScript對象，而是個DOMStringMap對象，DOMStringMap是HTML5一種新的含有多個名-值對的交互變量
1、讓所有的自定義的屬性值塞到一個數組中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}
2、刪掉一個data屬性
delete myDiv.dataset.attribute;
3、增加一個data屬性
myDiv.dataset.attribute4 = 'value4';
dataset的兼容性處理
如果瀏覽器不支持dataset，有必要做一下兼容處理：
if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 設置自定義屬性
var theValue = myDiv.dataset.attribute; // 獲取自定義屬性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 設置自定義屬性
var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性
}
參考：https://blog.csdn.net/qq_31851435/article/details/53100691
個人理解：用法
之前不是很懂爲什麼會有這樣的功能的出現，知道我發現了個案例：
我想要在渲染出來了個列表數據之後，在最後面的一個button標籤綁定一些操作，比如我點擊這個button，這一行數據就會刪除。
然而，我是循環渲染出來來了10行數據，當我點擊第6行的時候，我又怎麼知道我點的是第幾行？總不能給某個元素寫上自己第幾行？
那麼這時候自定義的數據就有用了，你渲染的時候直接寫在html標籤裏面，不如叫做data-line-num="i"，那麼當我點擊這個按鈕，就判斷這個按鈕的這個屬性等於多少，就知道我要刪除i爲幾的數據了，然後後面把所有數據第i個刪了，再重新渲染就好了。