这些日子我学到的JavaScript:Day24- HTML 的自订资料属性

data-* 属性
在 HTML 标签中可以放入自创的属性，这麽做的目的是去绑定 DOM 与资料以及验证资料。
语法是 data-*，把 * 代换成自订属性名称跟值，例如：data-farmer = "John"、data-dog = "Tom"。

而若要捞出所有 data- 开头属性的值，可以用 JS 选取 DOM，然後加上 .dataset 的语法在後面，用 console.log 去查就会得到一组物件。

// HTML

//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 中。