Как работат метод dataset в js?
Свойство .dataset, позволяет считывать, или устанавливать любые дата-атрибуты на HTML-элементе. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.
Например:
<p data-id="1" data-article="3">Дата-атрибут — это пользовательский атрибут на элементе</p>
<div>Container</div>
Обращение к свойству .dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе.
const p = document.querySelector('p')
console.log(p.dataset)
// { id: '1', article: '3' }
// можно обратится к конкретному атрибуту как к свойству
console.log(p.dataset.article)
// '3'
Если дата-атрибутов на элементе нет, то вернётся пустой объект:
const container = document.querySelector('div')
console.log(container.dataset)
// {}
Добавляем дата-атрибут к элементу. Название поля должно быть без префикса data-, браузер автоматически подставит его. Атрибуты состоящие из нескольких слов записываются в .dataset c помощью camelСase, а в HTML будут иметь названия в kebab-case. В значениях атрибутов в HTML могут быть только строки, поэтому любое значение будет автоматически приведено к строке.
Имеем
<p>Все не строковые значения будут приводиться к строке.</p>
Добавляем
const p = document.querySelector('p')
p.dataset.page = 42;
p.bookNumber = 5;
Получим
<p data-page ="42" data-book-number="5">Все не строковые значения будут приводиться к строке.</p>
Удалить дата-атрибут можно с помощью оператора delete. Возьмем предыдущий html
<p data-page ="42" data-book-number="5">Все не строковые значения будут приводиться к строке.</p>
удалим
const element = document.querySelector('p');
delete element.dataset.bookNumber;
Получим
<p data-page ="42">Все не строковые значения будут приводиться к строке.</p>
