Использование атрибутов данных

HTML разрабатывался с учетом возможности расширения данными, которые следует связать с определенным элементом, но которым не обязательно придавать какое-либо определенное значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных семантических элементах HTML без использования других обходных решений, таких как нестандартные атрибуты или дополнительные свойства DOM.

Синтаксис HTML

Синтаксис прост. Любой атрибут любого элемента, имя которого начинается с data-, является атрибутом данных. Допустим, у вас есть несколько статей, и вы хотите хранить дополнительную информацию, которая не имеет визуального представления. Для этого просто используйте data атрибуты:

<main>
  <article
    id="electric-cars"
    data-columns="3"
    data-index-number="12314"
    data-parent="cars">
    <!-- Electric car content -->
  </article>

  <article
    id="solar-cars"
    data-columns="3"
    data-index-number="12315"
    data-parent="cars">
    <!-- Solar car content -->
  </article>

  <article
    id="flying-cars"
    data-columns="4"
    data-index-number="12316"
    data-parent="cars">
    <!-- Flying car content -->
  </article>
</main>

Доступ из JavaScript

Читать значения этих атрибутов в JavaScript тоже очень просто. Для чтения можно использовать getAttribute(), указав полное имя атрибута в HTML, но стандарт определяет более простой способ: DOMStringMap, доступный через свойство dataset.

Чтобы получить атрибут data через объект dataset, обратитесь к свойству, имя которого соответствует части имени атрибута после data- (обратите внимание: дефисы преобразуются в верблюжий регистр).

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

Каждое свойство содержит строку, которую можно прочитать и изменить. В приведенном выше случае присваивание article.dataset.columns = 5 изменит значение атрибута на "5".

Вы также можете использовать document.querySelector() или document.querySelectorAll() вместе с селекторами атрибутов данных, чтобы найти один или все соответствующие элементы:

// Find all elements with a data-columns attribute
const articles = document.querySelectorAll("[data-columns]");

// Find all elements with data-columns="3"
const threeColumnArticles = document.querySelectorAll('[data-columns="3"]');
// You can then iterate over the results
threeColumnArticles.forEach((article) => {
  console.log(article.dataset.indexNumber);
});

Доступ из CSS

Поскольку атрибуты данных — это обычные атрибуты HTML, к ним можно обращаться даже из CSS. Например, чтобы отображать данные родительского элемента в статье, можно использовать генерируемое содержимое в CSS с функцией attr():

article::before {
  content: attr(data-parent);
}

Вы также можете использовать в CSS селекторы атрибутов, чтобы изменять стили в зависимости от данных:

article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}

Значения данных являются строками. Чтобы стили применялись, числовые значения в селекторе нужно заключать в кавычки.

Примеры

Варианты оформления

Представьте, что у вас есть класс callout. Теперь вы хотите реализовать разные варианты, например «примечание» и «предупреждение». Традиционно для этого просто используют разные имена классов.

<div class="callout callout--note">...</div>
<div class="callout callout--warning">...</div>

.callout {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
}

.callout--note {
  border-color: rgb(15 15 235);
  background-color: rgb(15 15 235 / 0.2);
}
.callout--warning {
  border-color: rgb(235 15 15);
  background-color: rgb(235 15 15 / 0.2);
}

В качестве альтернативы можно использовать атрибуты данных:

<div class="callout">...</div>
<div class="callout" data-variant="note">...</div>
<div class="callout" data-variant="warning">...</div>

.callout {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
}

/* Default style */
.callout:not([data-variant]) {
  border-color: rgb(15 15 15);
  background-color: rgb(15 15 15 / 0.2);
}
.callout[data-variant="note"] {
  border-color: rgb(15 15 235);
  background-color: rgb(15 15 235 / 0.2);
}
.callout[data-variant="warning"] {
  border-color: rgb(235 15 15);
  background-color: rgb(235 15 15 / 0.2);
}

У этого подхода есть несколько преимуществ:

• Он исключает множество недопустимых состояний, например применение callout--note без добавления callout или одновременное применение нескольких вариантов.
• Отдельный атрибут data-variant позволяет статически проверять допустимые значения с помощью линтинга или проверки типов.
• Переключать вариант интуитивнее: можно использовать div.dataset.variant = "warning"; вместо манипуляций с classList, которые требуют нескольких шагов.

Связывание произвольных данных с элементами DOM

Во многих веб-приложениях данные JavaScript являются источником истины для состояния пользовательского интерфейса. В таких случаях в HTML добавляют только необходимые для отображения атрибуты. Атрибуты данных полезны, когда вся информация уже присутствует в разметке, а JavaScript нужен только для обработки событий, синхронизации состояния и т. д.

Например, в нашем примере карусели с полями прокрутки HTML-страница уже заполнена множеством элементов <img>. Источник изображения изначально хранится в data-src, чтобы не отправлять запрос, а настоящий src добавляется, только когда <img> прокручивается в область видимости. Данные (источник изображения) находятся рядом с элементом, а JavaScript отвечает только за определение поведения.

Проблемы

Не храните в атрибутах данных содержимое, которое должно быть видимым и доступным, поскольку вспомогательные технологии могут не иметь к нему доступа. Кроме того, поисковые роботы могут не индексировать значения атрибутов данных. Часто, если нужно только отобразить данные атрибута, можно напрямую изменять textContent.

См. также

• Эта статья основана на материале «Использование атрибутов данных в JavaScript и CSS» на hacks.mozilla.org.
• Пользовательские атрибуты также поддерживаются в SVG 2; дополнительные сведения см. в разделах HTMLElement.dataset и data-*.
• Как использовать атрибуты данных HTML (Sitepoint)