Используй атрибуты, которые работают везде, и храни свои данные прямо в HTML.
Открыть этот урок в KodokonНекоторые атрибуты работают на любом элементе: это глобальные атрибуты. Ты уже используешь id и class; добавь в свой арсенал hidden (скрывает элемент), lang (указывает язык фрагмента), title (подсказка при наведении) и tabindex (порядок фокуса с клавиатуры).
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>Нужно прикрепить к элементу собственные данные? Никогда не выдумывай свой атрибут: HTML зарезервировал для этого атрибуты data-*. Имя после дефиса выбираешь ты сам, строчными буквами в kebab-case. Типичные случаи: идентификатор товара, состояние интерфейса, настройка компонента.
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>Со стороны JavaScript эти атрибуты читаются через свойство dataset. Внимание на автоматическое преобразование: kebab-case из HTML превращается в camelCase в JavaScript. Так что data-product-id читается как dataset.productId. Значения всегда являются строками, даже "true" или "42".
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";