1.什么是自定義屬性
這里所說的自定義屬性就是使用"data-"開頭的屬性，例如以下代碼：
<div data-animal-type="魚類" data-price="20">金槍魚</div>
2.獲取/修改自定義屬性的值
一個標簽中所有的自定義屬性都封裝在該標簽元素的dataset屬性中，可以通過它來操作自定義的屬性
注意：通過dataset操作自定義屬性時要去掉"data-"前綴，且對於含有"-"字符的屬性名要使用使用駝峰法
<body>
<div data-animal-type="魚類" data-price="20">金槍魚</div>
</body>
</html>
<script>
var div = document.querySelector("div")
// 獲取自定義屬性對象
console.log(div.dataset) //DOMStringMap {animalType: "魚類", price: "20"}
// 獲取price自定義屬性的值
console.log(div.dataset.price) //20
// 獲取animal-type自定義屬性的值(使用駝峰法)
console.log(div.dataset["animalType"]) //魚類
console.log(div.dataset["animal-type"]) //undefined
</script>
3.與setAttribute()的區別
廣義上的自定義屬性就是除了原生屬性以外的所有屬性。例如xxx屬性也可以說是廣義上的自定義屬性。
但是我們這里所說的自定義屬性是指使用"data-"開頭的屬性,可以說他是廣義上自定義屬性的一種，只是比較特殊而已。
dataset和setAttribute()添加的屬性都會出現在標簽中，且dataset設置的屬性會自動添加"data-"前綴
dataset只能獲取"data-"開頭的屬性，而getAttribute()所有的屬性都可以獲取
注意:點語法無法獲取到自定義屬性
<body>
<div data-animal-type="魚類" data-price="20">金槍魚</div>
</body>
<script>
var div = document.querySelector("div")
// 使用setAttribute設置xxx屬性
div.setAttribute("xxx","abc")
// 使用dataset設置添加自定義屬性yyy(自動添加"data-"前綴)
div.dataset.yyy = "def"
// 使用getAttribute讀取自定義屬性(不能漏掉"data-"前綴)
console.log(div.getAttribute("data-price")) //20
// 使用setAttribute修改自定義屬性(不能漏掉"data-"前綴)
div.setAttribute("data-animal-type","水里游的")
</script>
運行結果：
<div data-animal-type="水里游的" data-price="20" xxx="abc" data-yyy="def">金槍魚</div>