Дата-атрибуты

Дата-атрибуты — пользовательские атрибуты, которые начинаются со словом data-.

<p id="example" data-about="текст" data-form="сообщение">контент</p>

На примере выше были созданы два атрибута: about и form. Обратиться к ним через JavaScript можно через параметр dataset.

document.getElementById('example').dataset.about; // текст
document.getElementById('example').dataset.form;  // сообщение

Также можно создавать пользовательские атрибуты без значений.

<div data-copy>Сообщение</div>

Если создать атрибут без слово «data-» вначале, то это будет считаться ошибкой.

<!-- ❌ Не правильно, т.к. создаются атрибуты, которых нет в стандарте HTML -->
<div id="page" about="текст"></div>

<!-- ✅ Правильно -->
<div id="page" data-about="текст"></div>

Значение «dataset» защищено от перезаписи. Если попытаться перезаписать, то JavaScript просто это проигнорирует.

Дата-атрибуты появились в HTML 5.

Добавить дата-атрибут

Для добавления дата-атрибута, достаточно создать его в dataset, и тогда дата-атрибут автоматически появится в DOM.

Допустим есть HTML-элемент:

<div id="page"></div>

Добавить для него дата-атрибуты можно через код ниже:

document.getElementById('page').dataset.id = "120";
document.getElementById('page').dataset.categoryName = "JavaScript";

В результате DOM обновится и будет выглядеть следующим образом:

<div id="page" data-id="120" data-category-name="JavaScript"></div>

Стоит обратить внимание, что задавать значения в JavaScript дата-атрибутам надо в стиле «camelCase», иначе вернётся ошибка «Uncaught SyntaxError: Failed to set a named property 'category-name' on 'DOMStringMap': 'category-name' is not a valid property name».

document.getElementById('page').dataset['category-name'] = "JavaScript";
// Ошибка, неверно задано значение дата-атрибута

Добавить за раз несколько data-атрибутов

Допустим есть элемент:

<p id="example">контент</p>

Если попытаться перезаписать dataset, то JavaScript просто это проигнорирует.

// JavaScript проигнорирует код ниже, т.к. идёт попытка перезаписи dataset
document.getElementById('example').dataset = {
  id: 115,
  newProperty: "Новое значение"
}

Если элементу надо указать несколько значений атрибутов «data-*», то это можно сделать через код ниже:

let element = document.getElementById("example");

Object.assign(element.dataset, {
  id: '12',
  active: 'true',
  category: 'новости',
});

В итоге элемент в DOM будет обновлён как на примере ниже.

<p id="example" data-id="12" data-active="true" data-category="новости">контент</p>

Удалить дата-атрибут

Удаление дата-атрибута происходит через ключевое слово delete.

delete document.getElementById('page').dataset.categoryName;

Если присвоить дата-атрибуту значение «null» или «undefined», то данному дата-атрибуту просто присвоится значение «null» или «undefined».