Работа с data-атрибутами в JavaScript

При создании интерактивных веб-страниц часто возникает необходимость использовать специальные атрибуты, которые начинаются с «data-«. Это полезный способ добавить дополнительные данные к HTML-элементам, которые затем можно использовать в JavaScript. Вот пример такого кода:

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

Однако, при попытке обратиться к этим атрибутам напрямую в JavaScript, как показано ниже, результатом будет null.

document.getElementById("the-span").addEventListener("click", function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});

Почему это происходит? Дело в том, что «data-» атрибуты не являются стандартными свойствами объекта элемента, и их нельзя получить прямым обращением к свойству объекта.

Для доступа к этим атрибутам в JavaScript требуется использовать метод getAttribute(), который возвращает значение указанного атрибута элемента. Вот как это выглядит:

var el = document.getElementById('the-span');
var typeId = el.getAttribute('data-typeId');
var type = el.getAttribute('data-type');
var points = el.getAttribute('data-points');
var important = el.getAttribute('data-important');

Также можно использовать объект dataset, который предоставляет доступ ко всем «data-» атрибутам элемента. Имена свойств этого объекта соответствуют именам «data-» атрибутов, но без префикса «data-«. Вот пример:

var el = document.getElementById('the-span');
var typeId = el.dataset.typeId;
var type = el.dataset.type;
var points = el.dataset.points;
var important = el.dataset.important;

Обратите внимание, что dataset возвращает все значения в виде строк, поэтому для числовых значений может потребоваться использовать функцию parseInt() или parseFloat().

Итак, применяя эти знания, можно успешно получить значения «data-» атрибутов и использовать их в JavaScript.