在不知道“ data-”之后是什么的情况下获取data- *属性的值

Question

我想获取data-*（数据破折号或数据集）值，而又不知道破折号后的内容。 例如：

<div data-whatever="value" data-another="value2"></div>

我不知道“无论”或“另一个”部分的命名方式，但我需要掌握这一价值。 JavaScript有可能吗？

因为

document.querySelectorAll('[data-*]')

不是有效的选择器

Answer 1

元素的dataset属性包含所有data-*属性。 这是一个DOmStringMap其键是已删除data-的属性，并将其余单词转换为camelCase。

我认为没有办法只选择具有任何data属性的元素，因此您必须选择所有元素并通过检查element.dataset的长度自己过滤它们。

var dataElements = Array.from(document.querySelectorAll('*')).filter(el => Object.keys(el.dataset).length > 0);

Answer 2

尝试这样的事情：

在示例中，我为div创建了一个ID

<div data-whatever="value" data-another="value2" id="test"></div>

在我通过ID获得元素之后，检索返回DOMStringMap的dataset属性

data = document.getElementById('test').dataset;
console.log(data);

最后，我刚刚从返回的对象中获取了密钥。

Object.keys(data).map(function(el) {
    console.log(el)
});

希望对您有所帮助：）