# 自訂屬性 dataset 的妙用

## 觀念複習

增加在 HTML 中的標籤`data-"自定義名稱"`可以拿來埋各種資料：

下方 HTML 程式碼，在第 5 行增加 `data-num="1"`：

<input type="text" class="txt" placeholder="請輸入待辦事項">
<input type="button" class="save" value="儲存待辦">
<ul class="list">
  <li>123
    <input class="delete" type="button" data-num="1" value="刪除待辦">
  </li>
</ul>

接下來可以透過 getAttribute 取值：
JavaScript：

const list = document.querySelector(".list");
list.addEventListener("click", function (e) {
  if (e.target.getAttribute("class") !== "delete") {
    return;
  }
  let num = e.target.getAttribute("data-num");
  console.log(num);
});

補充另一個取值的方式： **dataset**

const list = document.querySelector(".list");
list.addEventListener("click", function (e) {
  if (e.target.getAttribute("class") !== "delete") {
    return;
  }
  let num = e.target.dataset.num;
  console.log(num);
});

此種方法也能順利取值 `dataset .後方請帶入 data-"自定義名稱" 的自定義名稱`，因為這邊 HTML 自定義名稱為 num ，所以是使用 dataset.num 的方式。

<font color="blue">需注意的是 假設你的 data 名稱為 data-xxx-xxx 在使用 dataset 獲取時需改成小駝峰寫法</font>，舉例如下：

下方 HTML 新增 `data-todo-item` 的命名方式：

<div data-todo-item="123">
123
</div>

取值時，須改寫為小駝峰寫法：`dataset.todoItem`

<script>
const item = document.querySelector('div').dataset.todoItem;
console.log(item)
</script>

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}