How to Get Values of Custom Data Attributes in JavaScript

Custom data attributes are a useful way to store extra information about an HTML element. You can easily get the data attribute value in JavaScript.

To get the values of custom data attributes in JavaScript, you can use the dataset property. This property allows you to access data attributes as properties of the element, using camelCase syntax. Simply reference the property with the same name as the data attribute, but without the data- prefix.

In this tutorial, we'll discuss 2 ways to get the values of custom data attributes in JavaScript. We'll start by looking at dataset property, which allows you to access data attributes as properties of the element.

Then, we'll explore the getAttribute method to access the attribute value. But to understand them properly, you must know the HTML data attribute syntax.

HTML Data Attribute Syntax

In HTML, you can create a custom data attribute by using the data-* syntax, here * represents the name of the attribute you want to create. You are allowed to create any attribute you want with this syntax, as long as it starts with the prefix data-.

          <div id="user" data-first-name="John" data-last-name="Smith"></div>
        

In this <div> element, I have added 2 custom attributes first-name and last-name with some values. Whatever you use after data- will be the name of your data attribute. Let's see how we can access those values with JavaScript.

Also Read: How to Get The Text Input Value Using JavaScript Events

Get Data Attributes with dataset Property in JavaScript

The dataset property is an object that allows you to access data attributes as properties of the element. It uses camelCase syntax, so the name you use for your data attribute will be converted to camelCase while accessing through the dataset property.

          const user = document.getElementById('user')

console.log(user.dataset.firstName)
// John

console.log(user.dataset.lastName)
// Smith
        

For example, I am selecting the HTML <div> element with the ID user and storing it to the user constant. Now I can access the dataset property on this element.

In this case, the dataset property will contain all the custom data attributes that this <div> element has. You have to access the data-first-name and data-last-name attributes as user.dataset.firstName and user.dataset.lastName respectively.

In this way, you can get these attribute values in your JavaScript code.

Also Read: Get File Extensions in JavaScript: 3 Easy Ways For You

Get Data Attributes with getAttribute Method in JavaScript

You can also use getAttribute() method to access data attribute values. For using the dataset property, you had to convert the attribute names to camelCase. But in this case, you have to pass the full name as a string to this method.

          const user = document.getElementById('user')

const firstName = user.getAttribute('data-first-name')
console.log(firstName)
// John

const lastName = user.getAttribute('data-last-name')
console.log(lastName)
// Smith
        

Here, I am calling the getAttribute() method on the user element. I am passing the full attribute name to this method as its argument. It is important to note that the name will also include the data- prefix.

Then this method will return the value of that data attribute. If we pass an attribute name that doesn't exist on that element, it will return null as the value.

Also Read: Methods to Get Hash (#) Value From URL Using JavaScript

Real-World Example of Data Attributes

You have seen how to access values from data attributes using JavaScript. Now let's see a useful example to understand how we can use it in our code.

          <a id="link" href="#" data-confirm="Are you sure you want to delete this item?" data-item-id="12345">Delete</a>
        

          const link = document.getElementById('link')

link.addEventListener('click', (e) => {
    e.preventDefault()

    if (confirm(link.dataset.confirm)) {
        console.log(link.dataset.itemId)
        
        // Send an AJAX request to the server to delete the item with the specified ID
    }
})
        

In this example, I have a link. When a user clicks that link, it will send an Ajax request to the server to delete an item. I am listening to the click event on this link.

The link has two data attributes: data-confirm, which contains a message to display to the user before deleting the item, and data-item-id, which contains the ID of that item.

When a user clicks the link, we use the dataset property to get the values of these attributes. After getting the confirmation, we can send the request to the server with the item ID.

This is just one simple example of using data attributes in a JavaScript application. But there are many other ways you can use them, depending on your specific needs.

Also Read: Best Ways to Access Object Properties Dynamically in Javascript

Conclusion

Between these 2 ways, I like to use the dataset property in JavaScript. Because it is very easy to use and returns the value of the data attribute as the appropriate JavaScript type.

For example, if the value of the attribute is a string, the dataset property will return a string. If the value of the attribute is a boolean, the dataset property will return a boolean. The getAttribute method, on the other hand, always returns the value of the attribute as a string.

But it's up to you which one you want to use to get data attribute values with JavaScript in your project.