从元素data- *属性构建对象

Question

给定一个像这样的元素：

<div data-answer="42" data-question="?"></div>

jQuery data()将返回您期望的对象：

{answer: 42, question: "?"}

但是，jQuery插件也将添加到该元素的内部缓存中，并将包含在数据中：

{answer: 42, question: "?", somePlugin: Plugin}

我想从仅存在于元素上的数据属性中创建一个对象，不包括添加到jQuery缓存中的任何内容。 有没有一种简单的方法，还是我必须遍历元素的属性，过滤掉非data- *属性并“手动”构造对象？

如Oriol的回答所述， elem.dataset我的要求，但是仅IE 11支持它-我的情况需要IE 8+的解决方案

Answer 1

遍历对象应该很容易，并在元素没有相应属性的地方过滤掉键。

或者，可以使用Vanilla JS ：

var elem = document.getElementById('yourElementIDhere');
// or any other way of getting the element, doesn't matter
var attrs = elem.attributes;
var data = {};
var attr;
for( var i=0, l=attrs.length; i<l; i++) {
    attr = attrs[i];
    if( attr.name.substr(0,5) == "data-") {
        data[attr.name] = attr.value;
    }
}

Answer 2

您可以尝试使用vanilla-js方法：

element.dataset;

另请参阅dataset MDN文章 。