javascript - 从元素数据-*属性构建对象

Question

给定一个元素，如:

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

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

{answer: 42, question: "?"}

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

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

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

如 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;
    }
}