Получение списка data-* атрибутов в JavaScript и jQuery

Быстрый ответ

Чтобы извлечь все атрибуты data-* из HTML-элемента в JavaScript, воспользуйтесь циклом element.attributes и выберите атрибуты, начинающиеся на data-:

const dataAttrs = Array.from(document.getElementById('elementId').attributes)
  .filter(attr => attr.name.startsWith('data-'))
  .reduce((obj, attr) => {
    obj[attr.name] = attr.value;
    return obj;
  }, {});

Для работы с jQuery используйте метод .data(), который автоматически выберет все атрибуты data-*:

const dataAttrs = $('#elementId').data();

Эти фрагменты кода возвращают объект, ключами которого являются имена атрибутов data-, а значениями — соответствующие им значения в элементе.

Применение теории на практике: работа с data-атрибутами

Data-атрибуты служат для хранения дополнительной информации и могут быть добавлены к стандартным HTML-элементам, обойдясь без дополнительных структур данных в JavaScript или jQuery. Обратите внимание, что JavaScript автоматически преобразует строковые значения атрибутов в соответствующие типы данных при их извлечении.

Профессиональное использование data-атрибутов

Автоматическое преобразование к CamelCase

C помощью element.dataset в современных браузерах имена data-атрибутов автоматически конвертируются в camelCase. Так, data-my-attribute превратится в element.dataset.myAttribute.

Подробнее об этом расскажет наш спикер на видео

Использование регулярных выражений

В старых браузерах без поддержки свойства .dataset тем не менее можно анализировать атрибуты data-* с помощью регулярных выражений:

const el = document.getElementById('elementId');
const dataAttrs = {};
for (let i = 0; i < el.attributes.length; i++) {
  const attrName = el.attributes[i].name;
  if (/^data-/.test(attrName)) {
    const key = attrName.slice(5).replace(/-([a-z])/g, g => g[1].toUpperCase());
    dataAttrs[key] = el.getAttribute(attrName);
  }
}

Возможности jQuery: кэширование данных

При использовании метода .data() в jQuery первый доступ к атрибутам кэшируется во внутреннем хранилище, что ускоряет последующие операции, поскольку они не требуют прямого обращения к DOM.

Визуализация

Вот как JavaScript и jQuery извлекают data-атрибуты:

| HTML-элемент                | Атрибуты               |
| -------------------------   | ---------------------- |
| <div data-role="...">       | data-role              |
| <span data-info="...">      | data-info              |
| <button data-toggle="...">  | data-toggle            |

JavaScript и jQuery эффективно раскрывают все скрытые в элементах данные, теперь доступные для вашего дальнейшего использования.

Продвинутые знания: особые случаи и рекомендации по производительности

Особые случаи: предотвращение проблем

Имейте в виду особенности работы с data-* атрибутами. Например, следите за актуальностью данных. Если вы обновите data-* атрибут через .attr(), после того как уже вызвали .data(), внутренний кэш jQuery не обновится. Для внесения изменений используйте .attr(), чтобы обеспечить синхронизацию.

Аспект производительности: эффективность обращений к атрибутам

При работе с большим количество элементов или атрибутов важно учесть оптимизацию. Используйте один вызов .data(), чтобы извлечь все данные, так вы сократите время работы с DOM:

// Эффективно
const allData = $('#elementId').data();

// Менее эффективно
const role = $('#elementId').data('role');
const info = $('#elementId').data('info');

Таким образом вы максимально используете возможности кэширования jQuery, снижая нагрузку на DOM.

Полезные материалы

1. data-* – HTML: Язык гипертекстовой разметки | MDN
2. Data | Документация jQuery API
3. jQuery how to find an element based on a data-attribute value? – Stack Overflow
4. Полное руководство по data-атрибутам | CSS-Tricks
5. HTML data-* Атрибут
6. Атрибуты и свойства
7. Как и почему следует использовать настраиваемые data-атрибуты HTML5 — SitePoint