Как работат метод 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>