今天來分享放在標籤內新的屬性，標籤內除了可以放 class 讓我們可以抓到元素去做互動也能放入 data-＊，這樣我們就可以把資料直接綁定在元素上如此一來就能點擊到元素就抓到上面的資料來達成資料驗證與刪除的手法，先聲明 **data- 這是一定要加的，後面的＊**可以自己替換名字，來看看下方的範例程式碼會稍微理解：
在 HTML 上我們綁定了 data-num="0" data-dog="3"
HTML

<!-- HTML結構 -->
<ul class="list">
   <li data-num="0" data-dog="3">農夫（小明）</li>
</ul>

JS
在 JS 內可以把 data-num 與 data-dog 用變數建立起來，並且使用 e.target 在點擊元素時，再用 .dataset.num 去讀取我們設定的資料

var list = document.querySelector('.list');

//確認點擊的農夫是誰
function checkList(e){
  var num = e.target.dataset.num;
  var dog = e.target.dataset.dog;
  console.log('農夫標號是'+num);
  console.log('有'+dog+'隻狗');
}
list.addEventListener('click',checkList,false);

如此一來當我們點擊農夫(小明)時，就可以印出他是編號1號農夫，並有 3 隻狗，這樣使用 data-＊搭配 dataset 點擊到元素就可以取得這元素上的資料囉！

使用 data 綁定資料到元素上程式範例 DEMO

dataset、array 運用

這邊我們之前用一個陣列在搭配 dataset 的運用，做出一個你點擊元素就會跳出這個元素的資訊，以這個範例來做說明讓大家更能體會到 dataset 可以運用在什麼地方上！點擊農夫名字跳出年齡資訊 DEMO

說明

HTML

 <ul class="list"></ul>

JS第一步

先建立農夫的資料陣列，並選取到 HTML 上的 UL 待會我們要把資料放進這裡面

var country = [
  {
    farmer:'小明',
    age:40
  }
  ,{
    farmer:'小美',
    age:30
  }
]
var list = document.querySelector('.list');

JS第二步

建立更新列表的函式，透過迴圈把陣列內的資料都跑一遍並且組字串放進 list 列表內，再組字串時也把 data-num 組進去，因為使用的是 for 迴圈所以 data-num 後面放 i 它就會依序把編號代入

//更新農場資料
function updateList(){
  var str = '';
  var len = country.length;
  for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+country[i].age+'</li>'
  }
  list.innerHTML = str;
}
//執行這個函式
updateList();

JS第三步

我們要做到點擊農夫就會跳出這個農夫的年齡，在這個函式內先建立var num = e.target.dataset.num; 就是先把抓到的 dataset 資訊用 num 存起來，不過因為我們只希望點擊 LI 會有反應點擊其他區域不要跳出訊息，所以這邊要寫一個判斷式，如果不是 LI 就返回，是LI 就執行 alert 內的文字，最後在 list 建立監聽事件綁定這個函式！

//確認點擊的農夫是誰
function checkList(e){
  var num = e.target.dataset.num;
  //查看抓到的節點
  console.log(e.target.nodeName);
  if(e.target.nodeName !== 'LI'){return};
  alert('這個農夫'+country[num].age+'歲了！')
}
list.addEventListener('click',checkList,false);

過去要達到這個效果需要先選取到每個 LI 並在每個 LI 上綁定監聽事件才能做到，用本章節的方法就可以減少程式碼更有效率的去完成點擊元素就能顯示元素內的資訊或刪除此元素囉！