JavaScript: Leverage HTML5 data attributes for maximum efficiency

In this article, we will discuss how to get HTML5 data attributes using JavaScript. We'll walk through a few practical examples to demonstrate how to use these data properties with plain JavaScript and jQuery.

JavaScript is one of the core technologies of the Internet. It is used by most websites and supported by all modern web browsers without the need for plugins. In this series, we'll discuss tips and tricks to help you with your day-to-day JavaScript development.

Often, you need to store some extra information along with different HTML elements on your web application or website. It may not mean anything to the user, but it may be helpful to you if you wish to act based on that information.

For example, if you have an HTML table that contains rows from a database, you might want to store the corresponding database ID for each row. This will make editing and other tasks easier. This is a great use for custom data attributes.

Before the introduction of these custom data attributes, developers would often use class attributes to store this kind of information, but class attributes are not actually used for this purpose, and this practice can make it difficult to understand the code and site markup.

With the introduction of HTML5 custom data attributes, storing and retrieving custom data in HTML has become very easy.

Accessing data attributes using Vanilla JavaScript

In this section, we will discuss different ways to get HTML5 data attributes using plain JavaScript.

HTMLElement.dataset Properties

dataset attributes allow you to easily access an element's data attributes.

Let us consider the following example.

First, we define a data-employee-id<li> custom data attribute on each </li> element to store the employee ID. This can be used later to get more details about the employee if needed. Next, we define an onclick<li> event handler on each </li> element, so when you click on any row, it will call getEmpId Function that ultimately gets the value of employee - the id data attribute associated with the corresponding <li> element.

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

There are a few important things when you use the dataset attribute to get individual properties. The data- prefix has been removed from the attribute name. Any lowercase characters followed by a hyphen are converted to uppercase and the hyphen is removed. In other words, dash-style property names are converted to camelCase object keys. Other roles remain unchanged.

In our example, using these rules, the data-employee-id attribute will be converted to employeeId. Therefore, you can use element.dataset.employeeId to get the value of the data-employee-id attribute.

This is how dataset works correctly in vanilla JavaScript.

getAttribute() Method

In this section, we will discuss how to get the value of a data attribute using the getAttribute method.

We will modify the example discussed in the previous section.

As you can see, getting a custom data attribute is very simple using the getAttribute method of the HTML element. You simply pass the entire property name along with the data- prefix to get the property's value.

Accessing data properties using the jQuery library

In this section, we will discuss how to get HTML5 data attributes using the jQuery library.

data() Method

The

jQuery data method allows you to easily get the data attribute of an element.

Let us understand how jQuery data methods work through the following examples.

As you can see, we only need to pass the camelCase version of the data attribute name to get its value.

attr() Method

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

Let’s take a quick look at how to use the attr method in jQuery.

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

As you can see, the attr method works the same as the getAttribute method in normal JavaScript.

In jQuery, the difference between the data and attr methods is that the data method internally converts the string obtained from the data attribute into the corresponding type, such as Numbers, Boolean values, etc.

This is how to easily get data properties using jQuery.

in conclusion

Today, we discussed how to get HTML5 data attributes using JavaScript. With the help of several practical examples, you learned how HTML5 data attributes work with common JavaScript and jQuery libraries.

The above is the detailed content of JavaScript: Leverage HTML5 data attributes for maximum efficiency. For more information, please follow other related articles on the PHP Chinese website!