Свойство .dataset
используется для доступа к пользовательским атрибутам данных (data-атрибутам) элемента DOM в виде объекта с ключами, соответствующими именам data-атрибутов.
Например, если у нас есть элемент <div data-id="123" data-name="John"></div>
, мы можем получить доступ к его data-атрибутам с помощью свойства .dataset
:
const divElement = document.querySelector("div")
const id = divElement.dataset.id // "123"
const name = divElement.dataset.name // "John"
Значения, полученные из свойства .dataset
, всегда имеют строковый тип. Если значение data-атрибута не может быть преобразовано в строку, оно будет возвращено как null
.
С помощью свойства .dataset
мы можем легко хранить и получать пользовательские данные для элементов на странице, например, идентификаторы объектов, параметры конфигурации или другие связанные данные. Это может быть полезно для создания динамических интерфейсов, где данные могут быть обновлены и изменены без необходимости внесения изменений в структуру DOM. Также, использование data-атрибутов может быть полезно для обработки событий, обмена данными между различными компонентами страницы и стилизации элементов с помощью CSS.