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

Data атрибуты: примеры использования

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

Синтаксис и основы

<div data-user-id="123" data-role="admin">Элемент</div>
<button data-action="submit" data-form-id="login">Отправить</button>

Пример 1: Кнопки действий

<button data-action="delete" data-item-id="42">Удалить</button>
<button data-action="edit" data-item-id="42">Редактировать</button>

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const action = btn.dataset.action;
    const itemId = btn.dataset.itemId;
    
    if (action === 'delete') {
      deleteItem(itemId);
    }
  });
});

Пример 2: Список товаров

<div class="product" data-product-id="101" data-price="99.99">
  <h3>Товар</h3>
  <button class="add-cart">В корзину</button>
</div>

document.querySelectorAll('.add-cart').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const product = e.target.closest('.product');
    const id = product.dataset.productId;
    const price = product.dataset.price;
    addToCart(id, price);
  });
});

Пример 3: Конфигурация компонентов

<div class="carousel" 
     data-autoplay="true" 
     data-interval="3000" 
     data-loop="true">
  <img src="slide1.jpg" />
  <img src="slide2.jpg" />
</div>

const carousel = document.querySelector('.carousel');
const config = {
  autoplay: carousel.dataset.autoplay === 'true',
  interval: parseInt(carousel.dataset.interval),
  loop: carousel.dataset.loop === 'true'
};
initCarousel(carousel, config);

Пример 4: Модальные окна

<button class="open-modal" data-modal-id="user-profile" data-user-id="5">Профиль</button>

<div id="user-profile" class="modal" data-type="profile">
  <h2>Профиль пользователя</h2>
  <button data-action="close">Закрыть</button>
</div>

document.querySelectorAll('.open-modal').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const modalId = btn.dataset.modalId;
    const userId = btn.dataset.userId;
    const modal = document.getElementById(modalId);
    modal.style.display = 'block';
    loadUserData(userId);
  });
});

Пример 5: JSON данные

<div data-config='{"theme":"dark","lang":"en"}'>
  Контент
</div>

const element = document.querySelector('[data-config]');
const config = JSON.parse(element.dataset.config);
console.log(config.theme); // 'dark'

Пример 6: Тестирование E2E

<input type="email" data-testid="email-input" />
<button data-testid="submit-button">Отправить</button>

test('submit form', async ({ page }) => {
  const input = page.getByTestId('email-input');
  const button = page.getByTestId('submit-button');
  await input.fill('test@example.com');
  await button.click();
});

Пример 7: React компонент

const Card: React.FC<{ id: string; title: string }> = ({ id, title }) => {
  const handleDelete = (e: React.MouseEvent) => {
    const deleteBtn = e.currentTarget as HTMLButtonElement;
    const itemId = deleteBtn.getAttribute('data-item-id');
    deleteItem(itemId);
  };

  return (
    <div className="card">
      <h3>{title}</h3>
      <button data-item-id={id} onClick={handleDelete}>
        Удалить
      </button>
    </div>
  );
};

Доступ к data атрибутам

const elem = document.getElementById('my-elem');

// Установка через dataset
elem.dataset.userId = '123';

// Получение через dataset
console.log(elem.dataset.userId);

// Через getAttribute
elem.getAttribute('data-user-id');

// CSS селектор
document.querySelector('[data-status="active"]');

Преимущества

• Хранение данных прямо в HTML элементах
• Клиентская идентификация без глобальных переменных
• Удобство в тестировании (data-testid)
• Соответствие стандарту HTML5
• Не влияют на SEO и индексирование
• Удаляются при удалении элемента