How can JavaScript be used to retrieve the values of HTML data attributes?

edit

JavaScript can be used to retrieve the values of HTML data attributes using the getAttribute() method.

For example, if you have an HTML element with the data attribute data-id and you want to retrieve its value, you can do the following:

const element = document.querySelector('#myElement');
const dataId = element.getAttribute('data-id');
console.log(dataId); // logs the data-id value

In this code example, we first select the HTML element with the ID myElement using the querySelector() method. Then, we use the getAttribute() method to retrieve the value of its data-id attribute and store it in a variable called dataId. Finally, we log the value to the console.

Note that data attributes can also be accessed using the dataset property, which returns an object containing all the data attributes and their values. For example:

const element = document.querySelector('#myElement');
console.log(element.dataset.id); // logs the data-id value