data-* 自定義屬性

透過 dataset 讀取自訂資料

Chun
4 min readJun 23, 2020

data-*

自定義屬性名稱及值在 HTML 上,前綴詞必須加上 data-*

data-* ='value'   //*:自行定義名稱

dataset

使用 dataset 可以撈出在 dom 節點上的所有 data-* 值,並且回傳成一個物件格式。所以要在 JavaScript 上取出自定義屬性 data 的值時,必須先使用 document.querySelector 等方式選取 dom 節點。

document.querySelector().dataset.myDefineAttributes  // 選取 data 的值

用途

在 HTML 上,自訂屬性可以和特定的資料做綁定,方便在 JavaScript 上做操控,例如做一些驗證、刪除或修改的動作。

範例一

querySelector 選取 class 內的第一個子元素。直接在選取的元素上 dataset 讀取上面的 data 值。

範例二

querySelector 選取父元素 class,再利用 e.target 的方式,選取指向的元素並 dataset 讀取上面的 data 值。

console 結果

除了一般使用 array 撈資料的方式,也可透過在 HTML 上綁定資料的方式,來撈取資料。

dataset 與 array 運用

1. 將陣列 array 資料手動新增 li 到 HTML 上

(1) 選擇 ul 節點
(2) 建立 function 執行動作
(3) 跑 for 迴圈,抓出每一筆資料
(4) for 迴圈 字串加總
(5) 在迴圈外層 寫入 HTML 字串加總list.innerHTML = str;
(6) 呼叫函式 function 才會執行

console 結果
成功手動新增 li 到 HTML 上

2. 確認點擊的農夫是誰(點擊 li 顯示文字內容)

(1) click 事件監聽
(2) 事件監聽 function 挪出來寫
(3) 抓出 指向的數字編號
(4) if 判斷式 當點擊不是 li 時 則停止動作,確保只有選擇到 li 時才執行動作
(5) country 陣列裡 [給定指向的數字編號]

splice 用法

array.splice(要刪除的位置, 共刪除幾筆資料);

延續上面,範例一:

使用 splice 刪除陣列裡的資料,刪除完後必須更新資料,重新渲染網頁。

點擊 li 便可刪除內容,下方圖示已點擊並刪除「查理」的資料。

範例二:

--

--

No responses yet