Выбор DOM-элементов по data- атрибуту без jquery в JS

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

Чтобы выбрать элементы с атрибутом data-xxx, примените следующий синтаксис:

const dataElements = document.querySelectorAll('[data-xxx]');

Для вывода соответствующих значений в консоль, выполните:

dataElements.forEach(el => console.log(el.dataset.xxx));

Используя исключительно JavaScript, мы легко нацеливаемся на data-атрибуты, минуя jQuery. Вот так просто!

От NodeList к упрощённому Array

Недостаток querySelectorAll заключается в том, что он возвращает NodeList, который хотя и похож на массив, но не является таковым. Однако проблема легко решается:

// Приготовьтесь, идет преобразование
const dataElementsArray = Array.from(dataElements);

Теперь мы можем пользоваться всеми удобствами методов массива в JavaScript!

Скорость — это не просто "быстрее"

querySelectorAll является эффективным, но при работе с крупными документами может привести к замедлению работы. Чтобы предотвратить замедление, сократите область поиска:

// Надеваем покровы от замедления
const container = document.getElementById('specific-container');
const scopedDataElements = container.querySelectorAll('[data-xxx]');

Чем меньше ищем, тем лучше!

Выцепить ценное (или data-атрибут)

Чтобы получить фактическое значение атрибута data-xxx, используйте dataset:

// Это будет нашим волшебным окном в данные
dataElements.forEach(el => {
  const value = el.dataset.xxx;
  console.log(value);
});

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

Представьте, что наш мгновенный взгляд скользит по лесу виртуальных элементов:

Лес:       🌳🌲🌳🐦(data-xxx)🌲🌳🐦🌳🌲🌳🐦(data-xxx)🌲🐦🌳

И вот наш CSS-селектор попадает в цель:

[data-xxx] {
  /* Стили для выделения элементов с data-xxx */
}

Найдено: ✨🐦(data-xxx)✨  ✨🐦(data-xxx)✨

CSS-селекторы делают поиск удобным и быстрым!

Знакомство с динамическими обновлениями

Проблемы статического NodeList

querySelectorAll не отслеживает изменения в DOM, поэтому для мониторинга динамических изменений воспользуйтесь MutationObserver:

// Мы становимся агентами следящими за NodeList
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      // Обработайте добавление или удаление узлов
    }
  });
});
observer.observe(document.body, { childList: true, subtree: true });

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

Слияние массивов

Пора подружить querySelectorAll с другими методами для массивов. А методам массивов – привет:

// Инициируем действие
Array.from(dataElements)
     .filter(el => el.dataset.xxx === 'specificValue')
     .forEach(el => {
       /* ... */
     });

Но не забывайте о проверке

querySelectorAll не всегда совместим с некоторыми браузерами. Проверьте его поддержку на Can I use....

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

1. HTML Global data-* Attributes — знакомство с data-атрибутами в HTML5.
2. Использование data-атрибутов – Обучение веб-разработке | MDN — подробное руководство по использованию data-атрибутов.
3. Полное руководство по Data-Attributes | CSS-Tricks — все об возможностях data-атрибутов.
4. Selectors API Level 1 — официальная спецификация Selectors API от W3C для DOM.
5. Атрибутные селекторы – CSS: Каскадные Таблицы Стилей | MDN — руководство по атрибутным селекторам в CSS.
6. :not | CSS-Tricks — как исключать элементы с определенными атрибутами, используя :not().
7. Can I use... Таблицы поддержки для HTML5, CSS3 и других технологий — таблица совместимости браузеров для querySelector.

Завершение

Продолжайте практиковать! Каждая проблема — это еще один шаг к совершенству. А "лайки" — приятный бонус.

Пусть мудрость кода пребудет с вами! 👩‍💻