HackMD
自訂屬性 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 的方式。
需注意的是 假設你的 data 名稱為 data-xxx-xxx 在使用 dataset 獲取時需改成小駝峰寫法，舉例如下：
下方 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>
