Data-атрибуты: мощный инструмент фронтенд-разработчика для хранения данных

<div data-user-id="123" data-role="admin">Администратор</div>

<div data-имя-атрибута="значение">Содержимое</div>

<button data-action="delete" data-target="user" data-id="42">Удалить пользователя</button>

<a href="product.html" data-category="electronics" data-price="299.99">Смартфон X5</a>

<form data-form-type="registration" data-requires-verification="true">...</form>

/* Выбор всех элементов с атрибутом data-status */
[data-status] {
padding: 5px;
}

/* Выбор элементов с конкретным значением */
[data-status="active"] {
background-color: green;
}

/* Выбор элементов, содержащих подстроку в значении */
[data-category*="premium"] {
border: 2px solid gold;
}

<div data-tab-container="settings">
<button data-tab="general" data-tab-active="true">Общие</button>
<button data-tab="security">Безопасность</button>
<button data-tab="notifications">Уведомления</button>

<div data-tab-content="general" data-visible="true">...</div>
<div data-tab-content="security" data-visible="false">...</div>
<div data-tab-content="notifications" data-visible="false">...</div>
</div>

// HTML: <div id="user" data-user-id="123" data-role="admin" data-last-login="2023-05-15">John Doe</div>

// Получение элемента
const userElement = document.getElementById('user');

// Доступ к отдельным data-атрибутам
const userId = userElement.dataset.userId; // "123"
const role = userElement.dataset.role; // "admin"
const lastLogin = userElement.dataset.lastLogin; // "2023-05-15"

// Перебор всех data-атрибутов элемента
for (const [key, value] of Object.entries(userElement.dataset)) {
console.log(`${key}: ${value}`);
}

// Изменение существующих data-атрибутов
userElement.dataset.role = "superadmin";

// Добавление новых data-атрибутов
userElement.dataset.department = "Engineering";
userElement.dataset.accessLevel = "5";

// Для имен с дефисами используется camelCase
userElement.dataset.lastActiveDate = "2023-06-20"; // Создаст data-last-active-date

// Проверка наличия атрибута
if ('userId' in userElement.dataset) {
console.log("User ID exists:", userElement.dataset.userId);
}

// Альтернативный способ проверки
const hasRole = userElement.dataset.role !== undefined;
console.log("Has role attribute:", hasRole);

// Удаление атрибута
delete userElement.dataset.lastLogin;

// Проверка после удаления
console.log("After deletion:", userElement.dataset.lastLogin); // undefined

// Преобразование строковых значений в другие типы
const numericId = parseInt(userElement.dataset.userId, 10); // Преобразование в число
const isActive = userElement.dataset.active === "true"; // Преобразование в boolean

// Работа с JSON-данными, хранящимися в data-атрибутах
const userElement = document.getElementById('user');
userElement.dataset.preferences = JSON.stringify({theme: 'dark', fontSize: 16});

// Позже, при чтении:
const preferences = JSON.parse(userElement.dataset.preferences);
console.log(preferences.theme); // "dark"

// Установка через dataset
userElement.dataset.status = "premium";
console.log(userElement.getAttribute("data-status")); // "premium"

// Установка через setAttribute
userElement.setAttribute("data-plan", "enterprise");
console.log(userElement.dataset.plan); // "enterprise"

<!-- HTML-структура -->
<div class="tabs" id="settings-tabs">
<div class="tabs-nav">
<button data-tab-target="account" class="active">Аккаунт</button>
<button data-tab-target="security">Безопасность</button>
<button data-tab-target="notifications">Уведомления</button>
</div>

<div class="tabs-content">
<div data-tab="account" class="tab-panel active">Содержимое вкладки Аккаунт</div>
<div data-tab="security" class="tab-panel">Содержимое вкладки Безопасность</div>
<div data-tab="notifications" class="tab-panel">Содержимое вкладки Уведомления</div>
</div>
</div>

<script>
document.querySelectorAll('#settings-tabs .tabs-nav button').forEach(button => {
button.addEventListener('click', () => {
// Определяем целевую вкладку из data-атрибута
const targetTab = button.dataset.tabTarget;

// Удаляем активный класс у всех кнопок и панелей
document.querySelectorAll('#settings-tabs .tabs-nav button, #settings-tabs .tab-panel').forEach(el => {
el.classList.remove('active');
});

// Активируем нужную вкладку и кнопку
button.classList.add('active');
document.querySelector(`[data-tab="${targetTab}"]`).classList.add('active');
});
});
</script>

<!-- HTML-структура -->
<div class="filter-buttons">
<button data-filter="all" class="active">Все</button>
<button data-filter="nature">Природа</button>
<button data-filter="architecture">Архитектура</button>
<button data-filter="people">Люди</button>
</div>

<div class="gallery">
<div data-category="nature" class="gallery-item">
<img src="nature1.jpg" alt="Природа 1">
</div>
<div data-category="architecture" class="gallery-item">
<img src="building1.jpg" alt="Здание 1">
</div>
<div data-category="nature" class="gallery-item">
<img src="nature2.jpg" alt="Природа 2">
</div>
<div data-category="people" class="gallery-item">
<img src="person1.jpg" alt="Человек 1">
</div>
<!-- и другие элементы -->
</div>

<script>
document.querySelectorAll('.filter-buttons button').forEach(button => {
button.addEventListener('click', () => {
const filter = button.dataset.filter;

// Активация нажатой кнопки фильтра
document.querySelectorAll('.filter-buttons button').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');

// Фильтрация элементов галереи
document.querySelectorAll('.gallery-item').forEach(item => {
if (filter === 'all' || item.dataset.category === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
</script>

<!-- HTML-структура -->
<form id="registration-form">
<div class="form-group">
<label for="email">Email:</label>
<input 
type="email" 
id="email" 
data-validate="required|email" 
data-error-required="Email обязателен для заполнения"
data-error-email="Введите корректный email адрес"
>
<div class="error-message"></div>
</div>

<div class="form-group">
<label for="password">Пароль:</label>
<input 
type="password" 
id="password" 
data-validate="required|minlength:8" 
data-error-required="Пароль обязателен"
data-error-minlength="Пароль должен содержать минимум 8 символов"
>
<div class="error-message"></div>
</div>

<button type="submit">Зарегистрироваться</button>
</form>

<script>
document.getElementById('registration-form').addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;

// Проходим по всем полям с атрибутом data-validate
this.querySelectorAll('[data-validate]').forEach(field => {
const validationRules = field.dataset.validate.split('|');
let fieldIsValid = true;
let errorMessage = '';

validationRules.forEach(rule => {
if (rule === 'required' && !field.value.trim()) {
fieldIsValid = false;
errorMessage = field.dataset.errorRequired;
} else if (rule === 'email' && !/^.+@.+\..+$/.test(field.value) && field.value.trim()) {
fieldIsValid = false;
errorMessage = field.dataset.errorEmail;
} else if (rule.startsWith('minlength:') && field.value.length < parseInt(rule.split(':')[1])) {
fieldIsValid = false;
errorMessage = field.dataset.errorMinlength;
}
});

// Отображение ошибки валидации
const errorDisplay = field.nextElementSibling;
if (!fieldIsValid) {
errorDisplay.textContent = errorMessage;
field.classList.add('invalid');
isValid = false;
} else {
errorDisplay.textContent = '';
field.classList.remove('invalid');
}
});

if (isValid) {
console.log('Форма прошла валидацию, отправка данных...');
// Здесь код для отправки формы
}
});
</script>

<!-- HTML-структура -->
<ul id="sortable-list" class="drag-list">
<li draggable="true" data-position="0" data-id="item-1">Элемент 1</li>
<li draggable="true" data-position="1" data-id="item-2">Элемент 2</li>
<li draggable="true" data-position="2" data-id="item-3">Элемент 3</li>
<li draggable="true" data-position="3" data-id="item-4">Элемент 4</li>
</ul>

<script>
const list = document.getElementById('sortable-list');
let draggedItem = null;

// Обработчики для drag-and-drop
list.addEventListener('dragstart', e => {
draggedItem = e.target;
e.dataTransfer.setData('text/plain', e.target.dataset.id);
setTimeout(() => e.target.classList.add('dragging'), 0);
});

list.addEventListener('dragend', e => {
e.target.classList.remove('dragging');
draggedItem = null;

// Обновляем позиции всех элементов
Array.from(list.children).forEach((item, index) => {
item.dataset.position = index;
});
});

list.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = getDragAfterElement(list, e.clientY);
const currentElement = draggedItem;

if (afterElement === null) {
list.appendChild(currentElement);
} else {
list.insertBefore(currentElement, afterElement);
}
});

// Вспомогательная функция для определения позиции вставки
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('li:not(.dragging)')];

return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y – box.top – box.height / 2;

if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
</script>

// Вместо назначения обработчиков каждой кнопке
document.querySelector('.dashboard').addEventListener('click', e => {
// Проверяем, что кликнули на элемент с data-action
if (e.target.dataset.action) {
const action = e.target.dataset.action;
const itemId = e.target.dataset.itemId;

// Выполняем действие в зависимости от значения data-action
switch (action) {
case 'edit':
editItem(itemId);
break;
case 'delete':
deleteItem(itemId);
break;
case 'share':
shareItem(itemId);
break;
}
}
});

<!-- HTML с шаблонами -->
<template id="user-card">
<div class="user-card" data-template="user-card">
<h3 data-bind="name"></h3>
<p data-bind="email"></p>
<span data-bind="role" class="user-role"></span>
</div>
</template>

// JavaScript для заполнения шаблона
function renderUserCard(userData) {
// Клонируем шаблон
const template = document.getElementById('user-card');
const card = template.content.cloneNode(true).querySelector('[data-template="user-card"]');

// Заполняем данные через data-bind атрибуты
card.querySelectorAll('[data-bind]').forEach(element => {
const field = element.dataset.bind;
if (userData[field]) {
element.textContent = userData[field];
}
});

return card;
}

<!-- HTML компонента с состоянием -->
<div class="dropdown" data-state="closed">
<button class="dropdown-toggle">Меню</button>
<ul class="dropdown-menu">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>

// JavaScript для управления состоянием
document.querySelectorAll('.dropdown-toggle').forEach(button => {
button.addEventListener('click', () => {
const dropdown = button.closest('.dropdown');
const currentState = dropdown.dataset.state;

// Переключаем состояние
dropdown.dataset.state = currentState === 'closed' ? 'open' : 'closed';
});
});

<!-- HTML с зависимостями -->
<input type="number" data-model="quantity" value="1">
<input type="number" data-model="price" value="10">

<div>Сумма: <span data-bind="total">10</span></div>

// JavaScript для отслеживания изменений
document.querySelectorAll('[data-model]').forEach(input => {
input.addEventListener('input', updateBindings);
});

function updateBindings() {
// Собираем текущие значения всех моделей
const models = {};
document.querySelectorAll('[data-model]').forEach(el => {
models[el.dataset.model] = Number(el.value);
});

// Вычисляем зависимые значения
const total = models.quantity * models.price;

// Обновляем привязанные элементы
document.querySelectorAll('[data-bind="total"]').forEach(el => {
el.textContent = total;
});
}

/* Стилизация на основе наличия атрибута */
[data-status] {
position: relative;
}

/* Стилизация на основе конкретного значения */
[data-status="success"] {
border-color: green;
}

/* Стилизация на основе начала строки */
[data-permission^="admin"] {
background-color: #f0f0f0;
}

/* Комбинирование селекторов для сложных условий */
button[data-action="delete"][data-confirmed="false"] {
opacity: 0.5;
pointer-events: none;
}