data-*

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

Все такие пользовательские данные доступны через интерфейс HTMLElement элемента, на котором установлен атрибут. Свойство HTMLElement.dataset предоставляет к ним доступ. Атрибут * может быть заменён любым именем, следуя правилам формирования XML имён, которые включают следующие рекомендации:

• Имя не должно начинаться с xml (регистронезависимо), так как оно зарезервировано для будущих спецификаций XML.
• Имя не должно содержать двоеточий (:), так как XML присваивает значение таким именам.
• Имя не должно содержать заглавных букв, так как XML использует только строчные буквы.

Это рекомендации. Если этих рекомендаций по именованию не соблюдать, ошибки не возникнут. Атрибуты всё равно будут соответствовать CSS селекторам атрибутов, при этом атрибут будет регистронезависимым, а любое значение атрибута — регистрозависимым. Атрибуты, не соответствующие этим трём рекомендациям, также будут распознаны свойством JavaScript HTMLElement.dataset, и пользовательские агенты включат атрибут в DOMStringMap, содержащий все пользовательские атрибуты данных для HTMLElement.

Если вы планируете использовать HTMLElement.dataset, часть имени атрибута, следующая за data-, может содержать только символы, разрешённые в именах свойств JavaScript (и дефисы, которые будут удалены). Версия имени атрибута dataset удаляет префикс "data-" и преобразует остальную часть имени из кебаб-кейса в camelCase. Например, element.getAttribute("data-test") эквивалентно element.dataset.test и data-test-abc будет доступно как HTMLElement.dataset.testAbc (или через HTMLElement.dataset["testAbc"]). Избегайте символов, отличных от букв, за дефисом, таких как data-test-1 или data--test, так как они не будут распознаны HTMLElement.dataset.

Добавление атрибутов data-* позволяет обычным элементам HTML стать более сложными и мощными объектами программы. Например, космический корабль "сприт" в игре может быть простым элементом <img> с атрибутом class и несколькими атрибутами data-*:

<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()" />

Для более углублённого обучения по использованию атрибутов HTML данных, обратитесь к использованию атрибутов данных.

• Все глобальные атрибуты.
• Свойство HTMLElement.dataset, позволяющее получать доступ к этим значениям и изменять их.
• Использование атрибутов данных