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>