data-атрибуты и dataset

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

У HTML фиксированный словарь атрибутов: href, src, disabled — за каждым закреплён смысл, и браузер знает, что с ним делать. Своё product-id туда не впишешь: валидатор поругается, а завтра спецификация может занять это имя под что-то своё — и разметка внезапно начнёт что-то значить.

Поэтому в HTML выделили целое пространство имён: всё, что начинается с data-, принадлежит вам. Браузер такие атрибуты не трогает — не рисует, не меняет поведение, просто хранит. Зато их видно в DevTools, по ним работают CSS-селекторы вроде [data-state="open"], и из JavaScript к ним есть короткий вход.

js

const buy = document.querySelector("#buy");

console.log(buy.getAttribute("data-product-id"));
console.log(buy.dataset.productId);

console.log(typeof buy.dataset.price);
console.log(Number(buy.dataset.price) * 2);

страница примера

Сначала предположите, что выведет код

dataset — не копия и не снимок. Это живая обёртка (объект типа DOMStringMap) над всеми data--атрибутами элемента: читаете свойство — читаете атрибут, пишете свойство — переписываете атрибут. В обе стороны и без синхронизации руками.

js

const card = document.querySelector("#card");

console.log(card.dataset.state);

card.dataset.state = "open";
console.log(card.getAttribute("data-state"));

card.setAttribute("data-state", "loading");
console.log(card.dataset.state);

страница примера

Сначала предположите, что выведет код

Отсутствующий ключ даёт undefined — не пустую строку и не null, который вернул бы getAttribute. Новое свойство добавляет атрибут в конец списка, а delete убирает его из разметки целиком.

js

const note = document.querySelector("#note");

console.log(note.dataset.missing);
console.log(typeof note.dataset.count);

delete note.dataset.hint;
console.log(note.hasAttribute("data-hint"));
console.log(note.outerHTML);

страница примера

Сначала предположите, что выведет код

В разметке имена принято писать через дефис, а в JavaScript дефис в имени свойства не наберёшь. Браузер переводит одно в другое по простому правилу: приставка data- отбрасывается, а дефис вместе со следующей строчной буквой превращается в заглавную. Обратный путь такой же: заглавная буква в свойстве становится дефисом и строчной буквой в атрибуте.

js

const post = document.querySelector("#post");

console.log(post.dataset.postId);
console.log(post.dataset.authorName);

post.dataset.readTime = "5";
console.log(post.hasAttribute("data-read-time"));
console.log(Object.keys(post.dataset).join(","));

страница примера

Сначала предположите, что выведет код

В разметке	В JavaScript	Что важно
data-id="7"	el.dataset.id	значение — строка "7", не число
data-user-id="7"	el.dataset.userId	дефис со строчной буквой схлопывается
data-order-42="ok"	el.dataset["order-42"]	перед цифрой дефис остаётся
атрибута нет	el.dataset.nope	undefined, а не пустая строка
data-page-u-r-l="/home"	el.dataset.pageURL = "/home"	обратный путь: заглавная → дефис

Дефис исчезает, только если сразу за ним идёт строчная латинская буква. Перед цифрой он остаётся, и ключ приходится брать в скобках. А обратный перевод ничего не знает про аббревиатуры: каждая заглавная буква станет отдельным дефисом, и pageURL превратится в data-page-u-r-l.

js

const trap = document.querySelector("#trap");

console.log(trap.dataset["order-42"]);
console.log(trap.dataset.order42);

trap.dataset.pageURL = "/home";
console.log(trap.getAttribute("data-page-u-r-l"));

страница примера

Сначала предположите, что выведет код

Самый частый приём: положить в разметку ключ строки — id товара, комментария, пользователя. Тогда обработчику не нужны ни параллельные массивы, ни разбор текста: элемент носит свой идентификатор с собой. Особенно это удобно с делегированием, когда слушатель один на весь список.

Одна деталь: event.target — это самый глубокий элемент под курсором, например span внутри пункта. У него своего data-id нет, поэтому от цели поднимаются вверх через closest до ближайшего элемента с нужным атрибутом.

js

const menu = document.querySelector("#menu");
const picked = [];

menu.addEventListener("click", (event) => {
  const item = event.target.closest("[data-id]");
  if (item) picked.push(Number(item.dataset.id));
});

document.querySelector("#tag").click(); // клик по вложенному span

console.log(picked);
console.log(document.querySelectorAll("[data-id]").length);

страница примера

Сначала предположите, что выведет код

Если вы пишете class="user-42", остановитесь: это data-атрибут, который стесняется своего имени.

js

const cards = document.querySelectorAll("#grid [data-tag]");
const js = [...cards].filter((el) => el.dataset.tag === "js");

console.log(js.length);
console.log(js.map((el) => el.textContent).join(""));

страница примера

Сначала предположите, что выведет код

В атрибуте живёт только текст. Число придётся пропустить через Number, флаг — сравнить со строкой, объект — сложить через JSON.stringify и разобрать через JSON.parse. Последнее уместно для маленькой конфигурации в пару полей; всё, что крупнее, в разметке только мешает.

js

const cfg = document.querySelector("#cfg");

cfg.dataset.options = JSON.stringify({ theme: "dark", size: 2 });
console.log(cfg.getAttribute("data-options"));

const parsed = JSON.parse(cfg.dataset.options);
console.log(parsed.size + 1);
console.log(typeof cfg.dataset.options);

страница примера

Сначала предположите, что выведет код

И помните, где эти данные лежат: в открытой разметке, которую видит любой посетитель через DevTools и просмотр исходного кода. Токены, чужие адреса и цены, которым нельзя доверять на клиенте, туда не кладут. Зато data-state отлично заменяет служебные классы: селектор [data-state="open"] в CSS и одна строчка в JavaScript.

Если объект нужен только коду и никогда — стилям, разметке и другим разработчикам, храните его рядом в Map или WeakMap с элементом в роли ключа. Разметка остаётся чистой, значения не превращаются в строки, а WeakMap отпустит запись, когда на элемент не останется сильных ссылок и его заберёт сборщик мусора — удаление из документа само по себе ещё ничего не освобождает.

js

const store = new WeakMap();
const node = document.querySelector("#node");

store.set(node, { rows: [1, 2, 3] });

console.log(store.get(node).rows.length);
console.log(node.outerHTML);

страница примера

Сначала предположите, что выведет код

Атрибуты, начинающиеся с data-, официально отданы разработчику: браузер их хранит, но никак не интерпретирует.
dataset — живая двусторонняя обёртка над этими атрибутами: запись в свойство меняет разметку, изменение атрибута видно в свойстве.
Имена переводятся автоматически: data-user-id ↔ dataset.userId; перед цифрой дефис остаётся, а заглавные буквы при записи разворачиваются в дефисы.
Значения всегда строки: число получают через Number, объект — через JSON.stringify и JSON.parse. Отсутствующий ключ даёт undefined.
Классический приём — хранить id прямо в элементе и доставать его в делегировании через event.target.closest("[data-id]"); для тяжёлых объектов лучше WeakMap.

1/3В разметке есть <div data-user-id="7">. Что вернёт el.dataset.userId?

2/3Выполнили el.dataset.pageURL = "/home". Какой атрибут появится в разметке?

3/3Слушатель висит на списке, у пунктов есть data-id, а внутри пункта — span с текстом. Кликнули по span. Что вернёт event.target.dataset.id?

Сумма корзины из разметки

В каждом пункте списка лежат цена и количество. Посчитайте итог, читая их через dataset. Не забудьте, что оба значения — строки.

js

const items = document.querySelectorAll("#cart li");
let total = 0;

// ваш код: прибавьте к total цену на количество по каждому пункту

console.log(total); // должно быть 440

страница примера

Сначала предположите, что выведет код

Перебираем пункты и приводим оба значения к числу — иначе + склеит строки.

jsлистинг · не запускается

let total = 0;
for (const item of items) {
  total += Number(item.dataset.price) * Number(item.dataset.qty);
}
console.log(total); // 440

let total = 0;
for (const item of items) {
  total += Number(item.dataset.price) * Number(item.dataset.qty);
}
console.log(total); // 440

Короче — через reduce: [...items].reduce((sum, item) => sum + Number(item.dataset.price) * Number(item.dataset.qty), 0).

Переключатель состояния

У кнопки есть data-state со значением off. Повесьте обработчик клика, который переключает состояние между off и on. Три клика подряд должны оставить кнопку включённой.

js

const button = document.querySelector("#toggle");

// ваш код: обработчик клика, меняющий data-state

button.click();
button.click();
button.click();

console.log(button.dataset.state); // должно быть on

страница примера

Сначала предположите, что выведет код

Читаем текущее значение из dataset и записываем противоположное — атрибут в разметке обновится сам.

jsлистинг · не запускается

button.addEventListener("click", () => {
  button.dataset.state = button.dataset.state === "off" ? "on" : "off";
});

button.addEventListener("click", () => {
  button.dataset.state = button.dataset.state === "off" ? "on" : "off";
});

Дальше внешний вид можно задать одним правилом CSS вместо возни с классами: селектор [data-state="on"] сработает сразу после присваивания.

data-атрибуты и dataset

Видеоразбор темы за 5–7 минут

Зачем размечать данные в разметкеСвои данные в чужой разметке

datasetЖивая обёртка над data-атрибутами

Из dash-case в camelCaseДефисы превращаются в заглавные буквы

id прямо в разметкеЭлемент носит свой идентификатор сам

Границы приёмаТолько строки, и не для всего

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Сумма корзины из разметки

Переключатель состояния