data-* 自定義屬性
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 值。
除了一般使用 array 撈資料的方式,也可透過在 HTML 上綁定資料的方式,來撈取資料。
dataset 與 array 運用
1. 將陣列 array 資料手動新增 li 到 HTML 上
(1) 選擇 ul 節點
(2) 建立 function 執行動作
(3) 跑 for 迴圈,抓出每一筆資料
(4) for 迴圈 字串加總
(5) 在迴圈外層 寫入 HTML 字串加總list.innerHTML = str;
(6) 呼叫函式 function 才會執行
2. 確認點擊的農夫是誰(點擊 li 顯示文字內容)
(1) click 事件監聽
(2) 事件監聽 function 挪出來寫
(3) 抓出 指向的數字編號
(4) if 判斷式 當點擊不是 li 時 則停止動作,確保只有選擇到 li 時才執行動作
(5) country 陣列裡 [給定指向的數字編號]
splice 用法
array.splice(要刪除的位置, 共刪除幾筆資料);
延續上面,範例一:
使用 splice 刪除陣列裡的資料,刪除完後必須更新資料,重新渲染網頁。
點擊 li 便可刪除內容,下方圖示已點擊並刪除「查理」的資料。