在不知道“ 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)
});

希望對您有所幫助：）