---
title: 'JS 入門 - data-* 透過 dataset 讀取自訂資料'
tags: JS, Javascript, dataset
description: 2021/01/26
---

JS 入門 -- data-* 透過 dataset 讀取自訂資料
===

## data-* 自定義屬性名稱及值在 HTML 上
1. 在 HTML 上，自訂屬性可以和特定的資料做綁定，方便在 JavaScript 上做操控。 例如：data-farmer = "John"、data-dog = "3"。
2. -* 字號的地方不能包含**大寫**字母，屬性值則可以是任何的**字串**。

data-＊ = 'value'   //＊：自行定義名稱

## dataset - 撈出所有 data- 開頭屬性的值
使用 dataset 可以撈出在 dom 節點上的所有 data-＊ 值，並且回傳成一個物件格式。

<ul class="list">
  <li data-num="0" data-dog="3" class="listli">卡斯伯</li>
</ul>

var data = document.querySelector('.list li').dataset;
console.log(data);  // {num: "0", dog: "3"}

如果只想撈出其中一個自訂屬性的值，就要在 .dataset 後面多加自訂屬性名。

var dogNum = document.querySelector('.listli').dataset.dog
console.log(dogNum); // 3

### 範例

<ul class="list">
  <li data-num="0" data-dog="3" class="listli">卡斯伯</li>
</ul>

var el = document.querySelector('.listli');
el.addEventListener('click', checkList, false);
function checkList (e) {
  var num = e.target.dataset.num;
  var dog = e.target.dataset.dog;
  console.log('農夫編號是' + num + '，有' + dog + '隻狗');
  // 農夫編號是0，有3隻狗
};

<style>
.red {
color: red;
}
</style>

## dataset 、 array 運用
1. 為了避免 li 效率低落，選定父元素 ul 大範圍來監聽
2. <span class="red">使用 e.target 來確認當下點擊的元素是誰</span>
3. return 可回傳數值，或當中斷點

<ul class="list" 
    style="padding:50px;background:#000;color:#fff">
</ul>

var farms = [
  {
   farmer: '卡斯伯'
  },
  {
    farmer: '查理'
  }
]

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

// 更新農場資料 (塞值去 HTML)
function updateList () {
  var len = farms.length;
  var str = '';
  for (let i = 0; i < len; i++) {
    var text = `<li data-num="${i}"> ${farms[i].farmer} </li>`;
    str += text;
  }
  el.innerHTML = str;
};
updateList ();

el.addEventListener('click', checkList, false);
function checkList (e) {
  var num = e.target.dataset.num; // e.target 當下點擊的元素是誰
  if(e.target.nodeName !== "LI"){return}; // 若點擊非 li ， 則中斷程式
  console.log('點擊的農夫是' + farms[num].farmer );
};

## splice 刪除陣列資料

陣列名.splice(要刪除的起始索引值位置, 共刪除幾筆資料);

var colors = ["black","red","yellow"];
colors.splice(0,2);
console.log(colors);  // ["yellow"]

承上 "dataset 、 array" 運用的程式碼 ( 點擊名字就刪除 )

function checkList (e) {
  var num = e.target.dataset.num; // e.target 當下點擊的元素是誰
  if(e.target.nodeName !== "LI"){return}; 
  farms.splice(num, 1); // 點擊到的名字即刪除
  updateList (); 
  // 刪除 array 資料後(編號會更動)，要再重新渲染一次
};

## :memo: 筆記
:::info
**target 的使用時機 :**
「當你要抓下當下點擊元素的詳細資訊時用」。
實際上來說都會看自己想要取得監聽資訊裡的哪個內容而訂，所以有時會從 e 取得、或者從 e.target，再從裡頭的物件觀看想取得的屬性在哪裡。
:::