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

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

Доступ к значению data-атрибутов можно получить через DOM Manipulation или CSS.

Пример:

<div id="myElement" data-id="123" data-status="active"></div>

В JavaScript:

const element = document.getElementById('myElement');
// Доступ через dataset
console.log(element.dataset.id); // "123"
console.log(element.dataset.status); // "active"

// Доступ через getAttribute
console.log(element.getAttribute('data-id')); // "123"

В CSS:

[data-status="active"] {
  border: 1px solid green;
}

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

• Хранение данных, специфичных для пользовательского интерфейса.
• Передача данных от HTML к JavaScript.
• Определение стиля элементов на основе их данных.

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

• Валидный HTML5.
• Четкое разделение контента и представления.
• Удобный доступ и манипулирование данными.

Недостатки:

• Не предназначены для хранения больших объемов данных.
• Могут быть менее производительными по сравнению с другими методами в определенных сценариях.