Данные в элементах

Иногда элементу нужно хранить информацию, которая не является его текстом. На кнопке написано Море, а вашему коду нужен подходящий к ней цвет. Для этого в HTML есть атрибуты data: атрибуты, имя которых начинается с data-, а дальше идёт имя на ваш выбор:

<button id="sea" data-color="teal">Море</button>
<button id="sun" data-color="orange">Солнце</button>

Браузер с ними ничего не делает: они нужны вашему скрипту. JavaScript находит их в свойстве элемента dataset под их именем без data-:

const seaButton = document.querySelector("#sea");
console.log(seaButton.dataset.color);

teal

Вместе с event.target это даёт один обработчик на много кнопок, где каждая кнопка сама говорит, что должно произойти:

const title = document.querySelector("h1");
const seaButton = document.querySelector("#sea");
const sunButton = document.querySelector("#sun");

function paint(event) {
    title.style.color = event.target.dataset.color;
}

seaButton.addEventListener("click", paint);
sunButton.addEventListener("click", paint);

Нажатие на «Море» делает заголовок сине-зелёным, а нажатие на «Солнце» — оранжевым. Другой цвет — это просто ещё одна кнопка в HTML со своим data-color.

Ещё несколько фактов об атрибутах data:

• Имя из нескольких слов, записанное через дефисы, в dataset пишется в camelCase, как и в style: data-start-time — это dataset.startTime.
• Значение всегда текстовое. Чтобы считать с data-price="25", превратите его в число: Number(button.dataset.price).
• Если у элемента нет такого атрибута, вы получите undefined.
• JavaScript может и задавать атрибуты data: item.dataset.id = 7; даёт элементу data-id="7". Это удобно для элементов, которые создаёт ваш скрипт.