The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

We simply type data- followed by the name of our attribute into the element's opening tag alongside any other attributes we're already using. For example, let's create a data attribute called "badges" and use it to attach a number to a p element.

We can either use the dataset property to get access to the data attributes or use the . getAttribute() method to select them by specifically typing their names. Here, in the below examples, we will use the getElementById() method that will return the elements having the given ID which is passed to the function.

Using the getAttribute() function This function returns the value of a specified attribute on the element. Think of it as asking the element about a specific detail directly. In the example above, div. getAttribute('data-myAttribute') is used to directly access the data-myAttribute attribute and retrieve its value.