DOM扩展——自定义属性

DOM扩展——自定义属性

引言

• 我们有时候在看别人的html代码的时候，会发现别人的标签中的自定义属性都会以data作为前缀，不同的单词都会用’-'相连，这是为啥呢？一种规范 or 一种语法？

自定义属性

• 看了DOM扩展后，发现原来是有一种专门的方法来操纵自定义属性的！

基本用法

了解 dataset属性

 <div id = 'myDiv' data-app-id = 'id01' data-myName = 'anan' active = 'true'>你好，李焕英！</div>

• 在dom元素对象中有一个属性叫 dataset, 它是用来保存自定义属性的DOMStringMap（是一个对象,别看它后缀Map），但是只会保存以data-开头这种格式的自定义属性

let div = document.getElementById("myDiv");
console.log(div.dataset); 
// DOMStringMap
// appId: "23456"
// myname: "Michael"
// active属性没有

我们可以看到， active属性没有被保存到DOMStringMap这个对象中。但是data-app-id 和 data-myname转换成为了该对象的属性，且属性名去除了data和’-’，’-'去除后以驼峰命名法重新拼接，这就是DOM自定义属性的语法。

使用dataset属性来读取设置自定义属性

let div = document.getElementById("myDiv");
// 取得自定义数据属性的值
let appId = div.dataset.appId; // data-app-id
let myName = div.dataset.myname; // data-myname
// 设置自定义数据属性的值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
// 有"myname"吗？
if (div.dataset.myname) {
    console.log(`Hello, ${div.dataset.myname}`);
}

这里可能有人会对myname有点疑惑，我的自定义属性名不是写了data-myName吗， 那DOMStringMap保存的属性名不应该是myName吗？我的小宝贝啊，这是因为浏览器在读取属性时会把所有的所有的字母都转换成小写呀！所以在写自定义属性时不同的英文单词最好用’-'连接，不要用驼峰了。

• 在jquery中使用.data()方法来操作自定属性，属性名是"驼峰化"的

console.log($(div).data('appId')); // 23456
$(div).data('appId', 'id02');
console.log($(div).data('appId')); // id02

总结

1. ‘data-’开头告诉浏览器本属性是自定义的，这是一种代码的规范。
2. 在实际编程中，还是尽量按照DOM的自定属性语法规范来写，这样也能让别人一眼就知道这个属性是你自己定义的，而不会怀疑这个是不是我不认识的html专有属性，然后就猜它的功能，哈哈哈