Используешь ли data атрибуты в HTML для поиска в DOM

Data атрибуты в HTML для поиска и работы с DOM

Data атрибуты (data-*) — это стандартный способ хранения пользовательских данных прямо в HTML элементах. Они позволяют связать информацию с элементом без воздействия на стиль или семантику. Это мощный инструмент, который должен использовать каждый Frontend разработчик.

Что такое data атрибуты

Data атрибуты — это атрибуты вида data-*, где вместо * можно использовать любое имя:

<!-- Примеры data атрибутов -->
<div data-user-id="123">User Profile</div>
<button data-action="delete">Delete</button>
<article data-category="javascript" data-difficulty="hard">Post</article>
<img data-src="image.jpg" data-loaded="false" />

Поиск элементов по data атрибутам

Использование querySelector

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

// Найти элемент по data атрибуту
const userElement = document.querySelector('[data-user-id="123"]');

// Найти все элементы с определённым атрибутом
const deleteButtons = document.querySelectorAll('[data-action="delete"]');

// Найти элементы с атрибутом, начинающимся на что-то
const hardQuestions = document.querySelectorAll('[data-difficulty^="hard"]');

// Найти элементы, содержащие значение
const jsRelated = document.querySelectorAll('[data-category*="javascript"]');

// Комбинированный селектор
const targetElement = document.querySelector('article[data-category="javascript"][data-difficulty="hard"]');

Доступ к data атрибутам через JavaScript

Использование dataset

Свойство dataset предоставляет удобный способ доступа к data атрибутам:

const element = document.querySelector('[data-user-id]');

// Чтение data атрибутов
console.log(element.dataset.userId);      // '123'
console.log(element.dataset.userEmail);   // undefined (если нет такого атрибута)

// Изменение data атрибутов
element.dataset.userId = '456';
element.dataset.status = 'active';

// Результат в HTML: data-user-id="456" data-status="active"

Правила преобразования названий

Дефисы в имени атрибута преобразуются в camelCase в dataset:

<div data-first-name="John" data-user-role="admin"></div>

const element = document.querySelector('div');
console.log(element.dataset.firstName);  // 'John'
console.log(element.dataset.userRole);   // 'admin'

// Обратное преобразование
element.dataset.firstName = 'Jane'; // атрибут станет data-first-name="Jane"

Практические примеры использования

Пример 1: Интерактивные кнопки с действиями

<button data-action="save" data-item-id="123">Save</button>
<button data-action="delete" data-item-id="456">Delete</button>
<button data-action="edit" data-item-id="789">Edit</button>

document.addEventListener('click', (e) => {
  const button = e.target.closest('[data-action]');
  if (!button) return;
  
  const action = button.dataset.action;
  const itemId = button.dataset.itemId;
  
  if (action === 'delete') {
    deleteItem(itemId);
  } else if (action === 'save') {
    saveItem(itemId);
  } else if (action === 'edit') {
    editItem(itemId);
  }
});

Пример 2: Фильтрация элементов

<div class="products">
  <div data-category="electronics" data-price="100">Laptop</div>
  <div data-category="electronics" data-price="50">Mouse</div>
  <div data-category="books" data-price="20">Novel</div>
</div>

function filterByCategory(category) {
  return document.querySelectorAll(`[data-category="${category}"]`);
}

function filterByPrice(maxPrice) {
  const items = document.querySelectorAll('[data-price]');
  return Array.from(items).filter(item => {
    return parseInt(item.dataset.price) <= maxPrice;
  });
}

Пример 3: Хранение состояния компонента

class Modal {
  constructor(element) {
    this.element = element;
  }
  
  open() {
    this.element.dataset.state = 'open';
    this.element.style.display = 'block';
  }
  
  close() {
    this.element.dataset.state = 'closed';
    this.element.style.display = 'none';
  }
  
  getState() {
    return this.element.dataset.state;
  }
}

Преимущества data атрибутов

Разделение забот (Separation of Concerns)

Data атрибуты отделяют данные от стилей. Вы можете менять HTML структуру без влияния на CSS:

/* CSS не зависит от data атрибутов */
.product {
  padding: 20px;
  border: 1px solid #ccc;
}

/* Но можно использовать их для селекторов */
[data-featured="true"] {
  border-color: gold;
}

Удобство тестирования

Testing библиотеки рекомендуют использовать data атрибуты для селекторов вместо классов:

// Тест с data атрибутом (стабилен к изменениям стилей)
const button = screen.getByRole('button', { name: /delete/i });
const deleteBtn = container.querySelector('[data-testid="delete-button"]');

// Плохо: зависит от классов
const btn = container.querySelector('.btn-danger.btn-sm');

Производительность

Поиск по data атрибутам работает быстро благодаря эффективной индексации браузера:

// Быстрый поиск
const element = document.querySelector('[data-user-id="123"]');

// Более ресурсоёмкий поиск по классам с фильтром
const elements = document.querySelectorAll('.user');
const filtered = Array.from(elements).find(el => el.dataset.userId === '123');

Когда использовать data атрибуты

• Хранение ID: data-id="123", data-product-id="456"
• Определение действий: data-action="delete", data-modal-target="modal-1"
• Состояние: data-state="open", data-loaded="true"
• Фильтры: data-category="javascript", data-level="advanced"
• Тестирование: data-testid="login-button"
• Пользовательские значения: data-user-name="John", data-item-count="5"

Когда НЕ использовать

• Чувствительные данные: Пароли, токены — они видны в HTML
• Большие объёмы данных: Большие JSON объекты лучше хранить в JavaScript
• Информация, которая часто меняется: Вместо частого обновления DOM используйте переменные

Заключение

Data атрибуты — это стандартный и надёжный способ связи HTML с JavaScript. Они делают код более читаемым, тестируемым и поддерживаемым. Используйте их как первый выбор для селекторов и хранения простых данных в DOM.