iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
5
Modern Web

JavaScript 初心者筆記系列 第 25

JavaScript 初心者筆記: HTML 的自訂資料屬性 - data-*

data-* 屬性

在 HTML 標籤中可以放入自創的屬性,這麼做的目的是去綁定 DOM 與資料以及驗證資料。
語法是 data-*,把 * 代換成自訂屬性名稱跟值,例如:data-farmer = "John"data-dog = "Tom"

而若要撈出所有 data- 開頭屬性的值,可以用 JS 選取 DOM,然後加上 .dataset 的語法在後面,用 console.log 去查就會得到一組物件。

// HTML
<div class="box" data-farmer="John" data-dog="Tom"></div>

//JS
var data = document.querySelector(.box).dataset;
console.log(data);
// {farmer: "John" ,dog: "Tom"}

如果只想撈出其中一個自訂屬性的值,就要在 .dataset 後面多加自訂屬性名(不含 data-)。

var dogName = document.querySelector(.box).dataset.dog
console.log(dogName);
// "Tom"

範例程式碼

dataset + 陣列的運用

在網購時,放入購物車的商品,為什麼可以按個刪除鍵,就輕鬆地從資料庫中移除呢?
我們可以綁定「HTML data-*屬性 的值」與「陣列中的索引值」(讓兩者有一致的編號),就能讓使用者點擊到 DOM 時,因偵測到 data-* 的值,而能連帶地去刪除或新增在陣列中的資料。

如何綁定陣列編號與 data-* 的值

先看範例程式碼
綁定的方法:函式帶入 e 參數,函式內用變數儲存偵測到的 data-* 值 (e.target.dataset.自訂屬性名)。從陣列撈資料的時候,陣列的索引值帶入「記錄了 data 值的變數」。

push() — 新增陣列資料

在已建立的陣列中加入新資料。
語法:陣列名.push('資料');

splice() — 刪除陣列資料

延續上面所學會的 data-* 技巧,透過綁定陣列索引值並使用 splice 語法,就能達到刪除陣列資料的效果。
語法:陣列名.splice(刪除起始索引值 , 刪除總筆數);

var colors = ["black","red","yellow"]
colors.splice(0,2);
// 再呼叫一次原陣列並用 console 去查
// colors 陣列只剩 "yellow"

再來一個範例程式碼:splice() 的第一個參數(刪除的起始索引值)可以用變數來表示,在範例程式碼中是將 DOM 的 data 屬性值宣告變數並放入 splice 中。


補充資料:[技術分享] 什麼是 HTML 5 中的資料屬性(data-* attribute)


上一篇
JavaScript 初心者筆記: localStorage - 將網頁上的資料儲存在瀏覽器
下一篇
JavaScript 初心者筆記: 簡易 to-do list 練習
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言