Получить значения атрибутов data- *, не зная, что следует за «data-»

Question

Я хочу получить значения data- * (тире данных или набора данных), не зная, что следует после тире.Пример:

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

Я не знаю, как называются "все" или "другие" части, но мне нужно получить значение.Возможно ли это с помощью JavaScript?

Поскольку

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

не является допустимым селектором

Answer 1

Свойство dataset элемента содержит все атрибуты data-*. Это DOmStringMap, чьи ключи - это атрибуты с удаленным data-, а оставшиеся слова преобразованы в camelCase.

Я не думаю, что есть способ выбрать только элементы с любым атрибутом данных, поэтому вам придется выбрать все элементы и отфильтровать их самостоятельно, проверив длину element.dataset.

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

Answer 2

Попробуйте что-то вроде этого:

В примере я создал Id для div

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

И после того, как я получил элемент по Id, получил dataset свойство, которое вернуло DOMStringMap

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

И наконец я только что получил ключи от возвращенного объекта.

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

Надеюсь, это поможет вам:)