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

Build an object from an elements data-* attributes

本文关键字：构建 对象 属性 元素 data-      更新时间：2023-09-26

给定一个元素，例如：

<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 +的解决方案

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

或者，香草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;
    }
}

你可以尝试 vanilla-js 的方式：

element.dataset;

另请参阅dataset MDN 文章。

相关文章：