HTML5 自定义属性
1.什么是自定义属性
- 特殊属性：例如id，class，checked这类属性有特殊的作用，设定后将影响元素渲染，同时点语法也能获取到这些属性值
- 自定义：自定义属性使用"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()的区别
- 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>
