Атрибуты data-* позволяют хранить пользовательские приватные данные на любом HTML-элементе. Это стандартный способ присоединения метаданных к DOM, которые может прочитать JavaScript, без использования нестандартных атрибутов или классов.
html
Edit
Атрибуты data-* позволяют хранить пользовательские приватные данные на любом HTML-элементе. Это стандартный способ присоединения метаданных к DOM, которые может прочитать JavaScript, без использования нестандартных атрибутов или классов.
Edit
datasetconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
Два ключевых правила: data-user-role доступен как dataset.userRole (дефисы превращаются в camelCase), и каждое значение — это строка — преобразуйте при необходимости (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
Хранение id на каждом элементе означает, что один слушатель на родительском элементе может обрабатывать все элементы.
data-* — это чистый, соответствующий стандартам способ передачи данных с сервера в DOM для клиентского JavaScript (без дополнительного вызова API), настройки делегирования событий и управления состоянием CSS — без создания нестандартных атрибутов, которые сделали бы HTML невалидным.
Однако не храните там большие или чувствительные данные; они видны в разметке.