Question

我正在使用HTML5的attr-data-*属性和相应的javascript dataset

我正在做很多动态表单处理，所以我最终得到这样的东西：

<input data-feaux="bar" data-fizz="buzz"/>

由于HTMLElement.dataset返回DOM string map，我唯一可以弄清楚如何将其转换为本机对象的方法是：

var obj = JSON.parse(JSON.stringify(input_el.dataset))

有更好的方法吗？

修改

为什么我要这样做？假设我有很多很多这样的元素。我想循环遍历它们并将它们推入一个数组中以便稍后处理，即

elements = document.querySelectorAll("input")
my_data_array = []
for(var i = 0; i < elements.length; i++) {
    my_data_array.push(elements[i].dataset)
}

现在我有一个对象数组，即我可以使用的[{feaux: "bar", fizz:"buzz"}....]。

但是，当我不将DOM string map转换为对象时，数组不会被填充（即上面的代码不起作用）

修改2

仔细观察，它实际上是DOM string map，而不是object。纠正原始问题中的拼写错误以反映这一点。

Answer 1

您可以使用Object.assign

Object.assign({}, element.dataset)

对于不支持Object.assign的浏览器，您可以使用polyfill

Answer 2

不要忘记JSON.stringify和JSON.parse。

var data = document.getElementById('someElement').dataset;
data = JSON.parse(JSON.stringify(data));

根据Mozilla，这应该可以在没有填充的情况下一直回到IE 8。

Answer 3

这里有一个小功能来检索元素数据集作为普通对象：

function datasetToObject(elem){
    var data = {};
    [].forEach.call(elem.attributes, function(attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

从： Get list of data-* attributes using javascript / jQuery

Answer 4

在es6中，您可以使用对象展开。
{ ...element.dataset }

将data- *属性转换为对象

4 个答案: