在html5中可為所有元素新增一種自定義的屬性，這種屬性的字首以data-開頭，比如：data-name,目的是為元素提供與頁面渲染無關，但與dom元素強相關的屬性。新增完自定義屬性後我們可以通過元素的dataset屬性來訪問其值。

dataset與getAttribute/setAttribute的對比

• 在此之前的訪問屬性的方式我們用getAttribute/setAttribute

  • html 結構：

    <div id='div' name='divName'>我是div</div>

  • javascript結構：

    var div = document.getElementById('div'
     
    );
    console.log(div.getAttribute('name')); // divName
    div.setAttribute('gender','male');
    console.log(div.getAttribute('gender')); // male

• 現在我們來使用html5中的自定義屬性 data-*

  • html結構：

    <p data-name='pName' data-nick-name='dear pName' data-gender='female' myname='資料集訪問不到'>我是p</p>

  • javascript結構：

    var p = document.querySelector
     
    ('p');
    console.log(p.dataset.name); // pName
    console.log(p.dataset.nickName); // dear Name
    console.log(p.dataset.gender); // female
    console.log(p.dataset); // DOMStringMap {name: "pName", nickName: "dear pName", gender: "female"}
    console.log(p.myname); // undefined
    

總結：

從上面的程式碼我們可以知道，dataset屬性值是DOMStringMap的一個例項，也就是一個鍵值對的對映，其實自定義屬性很早就已經開始使用了，像京東，淘寶這些電商網站，審查他們的頁面，可以看到很多。如果需要給元素新增一些不可見的資料以便進行其他處理，那就要用到自定義資料屬性。在跟蹤連結或者混搭應用中，通過自定義資料屬效能方便地知道點選來自頁面中的哪個部分。