1.什么是自定义属性
这里所说的自定义属性就是使用 data-开头的属性，例如以下代码：
<div data-animal-type="鱼类" data-price="20">金枪鱼</div>2.获取/修改自定义属性的值
操作自定义的属性需要用到相应的属性方法，这个属性就是 dataset.
一个标签中所有的自定义属性都封装在这个属性对象内，操作这个对象内的属性就是操作自定义的属性
在js中操作自定义属性要使用使用驼峰法
<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
div.dataset.yyy = "def"
// 可以使用getAttribute读取自定义属性
console.log(div.getAttribute("data-price")) //20
// 可以使用setAttribute修改自定义属性
div.setAttribute("data-animal-type","水里游的")
</script>运行结果：
<div data-animal-type="水里游的" data-price="20" xxx="abc" data-yyy="def">金枪鱼</div>