data 自定義屬性
- 在標籤中定義data自定義屬性：data-key=“value”;
- 在js操作該元素的 data 自定義屬性：el.dataset
- 獲取：el.dataset.key
- 設置: el.dataset.key = “value”
注意自定義屬性：“data-”開頭，但溜_x_i_a_o_迪童鞋自行想象自定義屬性，嘗試失敗了！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box" data-definition="Custom"></div>
<script>
{
let box = document.querySelector("#box");
console.log(box.definition);
}
</script>
</body>
</html>
正確方式：通過dataset屬性獲取
let box = document.querySelector("#box");
//console.log(box.data-definition);
console.log(box.dataset.definition);
也可直接進行修改
let box = document.querySelector("#box");
//console.log(box.data-definition);
console.log(box.dataset.definition);
box.dataset.definition = "自定義屬性";
console.log(box.dataset.definition);
自定義屬性和Attributes（上一節有說明：DOM屬性操作及ECMA、DOM 的屬性操作的區別）一樣存在文檔中，只能是字符串，可通過JS操作html中的自定義屬性，最終會呈現在html文檔中。
let box = document.querySelector("#box");
box.dataset.definition = "自定義屬性";
box.dataset.xiaodi = '6666';
（後續待補充）