How to Get and Use HTML5 Data Attributes in JavaScript

In this article, we’ll discuss how you can get HTML5 data attributes with JavaScript. We’ll go through a couple of real-world examples to demonstrate how you can use these data attributes with vanilla JavaScript and jQuery.

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing tips and tricks that will help you in your day-to-day JavaScript development.

More often than not, you need to store a bit of extra information along with the different HTML elements on your web app or site. It may not make any sense to users, but it can be helpful to you should you wish to perform operations based on that information. For example, if you have a HTML table with rows from a database, for each row you might want to store the corresponding database id. That will make edits and other transactions much easier. This is a great use of a a custom data attribute. Until the introduction of these custom data attributes, developers would often use the class attribute to store such information, but the class attribute isn't actually meant for that and this practice can make it more complicated to understand the code and the site markup.

With the introduction of HTML5 custom data attributes, it’s really easy to store and retrieve custom data within your HTML.

Access Data Attributes With Vanilla JavaScript

In this section, we’ll discuss different ways that you can use vanilla JavaScript to get HTML5 data attributes.

The HTMLElement.dataset Property

The dataset property allows you to access data attributes of an element easily.

Let's consider the following example.

First of all, we’ve defined the data-employee-id custom data attribute on each <li> element, which is used to store the employee ID. It can be used later on to fetch more details of an employee if it’s needed. Next, we’ve defined the onclick event handler on each <li> element, so when you click on any row, it will call the getEmpId function, which eventually fetches the value of the employee-id data attribute associated with the corresponding <li> element.

In the getEmpId function, we’ve used the dataset property of the <li> element which is passed as the first argument. The dataset property returns a DOMStringMap object which you can use to get individual properties.

When you’re fetching individual properties with the dataset property, there are a few important things. The data- prefix is removed from the attribute name. Any lowercase character followed by a hyphen is converted to uppercase and a hyphen is removed. In other words, dash-style attribute names are converted to camelCase object keys . Other characters will remain unchanged. In our case, with these rules, the data-employee-id attribute is converted to employeeId. Thus, you can use element.dataset.employeeId to fetch the value of the data-employee-id attribute.

So that’s how the dataset properly works in vanilla JavaScript.

The getAttribute() Method

In this section, we’ll discuss how you can use the getAttribute method to get the value of data attributes.

We’ll revise the example which we’ve just discussed in the previous section.

As you can see, it’s pretty straightforward to get custom data attributes with the getAttribute method of an HTML element. You just need to pass the whole attribute name along with the data- prefix to get the value of an attribute.

Access Data Attributes With the jQuery Library

In this section, we’ll discuss how you can use the jQuery library to get HTML5 data attributes.

The data() Method

The jQuery data method allows you to fetch data attributes of an element easily.

Let’s go through the following example to understand how the jQuery data method works.

As you can see, we just need to pass the camel-case version of the data attribute name to get its value.

The attr() Method

In jQuery, you can also use the attr method to get the value of the specific attribute of an element.

Let’s quickly see how you can use the attr method in jQuery.

…
…
var empId = $(element).attr('data-employee-id');
…
…

As you can see, the attr method works in the same way as that of the getAttribute method in vanilla JavaScript.

In jQuery, the difference between the data and attr method is that the data method internally converts the string obtained from a data attribute to corresponding types like numbers, booleans and so on.

So that's how you can use jQuery to fetch data attributes easily.

Conclusion

Today, we discussed how you can get HTML5 data attributes with JavaScript. With the help of a couple of real-world examples, you learned how HTML5 data attributes work with either vanilla JavaScript and the jQuery library.