兼容版的element.dataset

1. data 与 dataset的定义与使用

data-* 属性是 HTML5 中的新属性, 我们可以使用data-前缀设置需要的自定义属性，来存储页面或应用程序的私有自定义数据,

我们可以使用dataset属性（对象）访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集

例子：

<div id="student" data-age="12" data-name="zhang">张三</div>

可以通过以下方式获取

var ele = document.getElementById('student');  
var age = ele.dataset.age; // "12"

注意语法规则，属性名称 data-abc-def 与键值 abcDef 相对应

2.兼容性

所有主流浏览器都支持 data-* 属性，部分浏览器支持dataset

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

https://caniuse.com/#feat=dataset

3.兼容方案

function dataset(element){
    var obj={};
    if(element.dataset){
        return element.dataset;
    }else{
        for(var i=0;i<element.attributes.length;i++){
            var key=element.attributes[i].nodeName;
            if(/^data-\w+$/.test(key)){//判断是否以data-开头的属性名
                var value=element.attributes[i].nodeValue;//值
                var keyName=key.match(/^data-(\w+)/)[1];//键名
                obj[keyName]=value;//对象添加属性
            }
        }
    }
    return obj;
}
var ele = document.getElementById('student'); 
console.log(dataset(ele))
console.log(dataset(ele).age);

参考：

https://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

https://blog.csdn.net/qq_21794603/article/details/72732150?utm_source=blogxgwz0

https://blog.csdn.net/qq_33745501/article/details/79647469