More and more web developers are adopting the HTML5 web technology, because of the new feature set it provides. One such great feature of the latest HTML markup language, developers should know about is the HTML5 data attributes, and more importantly, the DataSet API feature.
Through this post, I’ll talk about the DataSet API and will provide an example to help you understand how it can be used.
Introduction
Before the advent of HTML5, developers didn’t had many options to work with arbitrary data. They only relied upon “class name” or “rel” attribute to store small pieces of arbitrary data. However, it resulted in maintenance issues and caused confusion. But this problem was resolved with the help of HTML5 new attribute called as “data”.
The data attribute helped to store custom data attributes to the web pages, without the need of polluting class name or using invalid elements. Let us now view an example containing JavaScript code (to understand the usefulness of data attributes):
<div id="game" class="user_xyz"></div>
The above line of JS code would search for an element having the ID: game. And after string parsing, we would be able to find a class that begins with user_, let’s say “xyz” is the ID and then show up all the messages of that users.
Now assume we would like to define the game level and the component:
<div id="game" class="xyz level_2 component=Jack"></div>
You can see that the class attribute has become too messy and is difficult to understand, and so it’s easy for us to make errors. Also, the JavaScript parsing is hardly comprehensible.
Using HTML5 Data attributes
But, using HTML5 data attributes we can carry out the above discussed task in a relatively easy manner:
<div id="game" data-user = "xyz" data-level="2" data-opponent="Jack"></div>
As you can see in the above line of code, we’ve added a prefix “data-” to the attributes. This helps in searching for any attribute name and its value without any hassle. Now, you can easily make any changes to the above line without making errors. For instance, assume you would like to change the ‘opponent’ attribute with ‘final-opponent’. This can be achieved by using the following line of code:
<div id="game" data-user = "xyz" data-level="2" data-final-opponent="Jack"></div>
HTML5 DataSet API: The Why and How Of It?
Often managing data attributes can give you a hard time, as it might become complicated. This is why DataSet API was introduced. It made it easier to perform different functions on data attribute values such as: setting, creating, retrieving and deleting.
1. Setting Data Attribute Values
DataSet API helped to set values of attributes. For instance, the following code will help you add data-user as an attribute to our element and will set its value to ‘xyz’.
document.getElementById("element").dataset.user = "xyz";
2. Getting Data Attribute Values
Assume you created some attributes but cannot access their values. In that case creating attributes doesn’t make sense. However, the DataSet API ‘get’ function make it possible for you to fetch data attribute values easily. For example, the below given line of code will help you print (i.e. get) the value of data-final-opponent attribute to the console.
console.log(document.getElementById("element").dataset.finalOpponent);
//prints “Jack”
3. Deleting Data Attribute Attributes
The DataSet API also helps in deleting the attribute value with help of the delete operator.
delete document.getElementById("element").dataset.finalOpponent;
Data Attributes vs DataSet API
As we had discussed previously HTML5 data attribute add “data-” prefix to the attribute name. On the other hand, the dataset API simply converts the name of the attribute to camelCase.
See the below example using data attributes:
<div id="game" data-user = "xyz" data-level="2" data-final-opponent="Jack"></div>
As you can see in the above code, we’ve defined 3 data attributes names: data-user, data-level and data-final-component. Now, let us look how the HTML5 DataSet API converts these attribute names to CamelCase.
data-user: gets converted to xyz
data-level: gets converted to 2
data-final-component: gets converted to finalComponent
Example to Demonstrate How to Use Dataset API and jQuery
Hope you would now have good understanding of the DataSet API. Let us now look at an example to understand how to create custom attributes using the HTML5 dataset API. Also, you can add various effects to display the list of custom attributes using jQuery.
Here’s an example, where I am creating a popup to show the list of custom attributes (that we created with help of DataSet API):
HTML STRUCTURE
<ul id="empist">
<li data-name="Mark" data-designation="Developer"><a href="javascript:void(0)">Mark</a></li>
<li data-name="Brad" data-designation="UI Developer"><a href="javascript:void(0)">Brad</a></li>
<li data-name="Max" data-designation="Content Writer"><a href="javascript:void(0)">Max</a></li>
<li data-name="Jack" data-designation="UI Designer"><a href="javascript:void(0)">Jack</a></li>
</ul>
<div class="edit_popup"></div><!--popup container-->
<div class="fade_overlay"></div><!--div used for overlay-->
<script>
$(document).ready(function() {
$("#empist li a").click(function(){
var ename = $(this).parent("li").attr("data-name");
var edesignation = $(this).parent("li").attr("data-designation");
$(".fade_overlay").show();
$(".edit_popup").show().html("Designation of "+ename+" is "+edesignation);
});
});
</script>;
Output:
Let’s Wrap Up!
In case you are still using class name or rel attributes to store elements, it’s time to switch to HTML5 DataSet API. That’s because, the DataSet API is highly customizable and helps in creating custom attributes to store data, and avoids using non-semantic elements and confusion because of writing the class name again and again.
Besides, the custom attributes that the DataSet API helps to create is an added advantage that helps to meet the increasing demand of websites that needs to hold more specific elements. Every browser that supports HTML5 will be able to access DataSet API.
This tutorial will serve as a helpful guide that will make you learn about the HTML5 DataSet API, and how it can be used to create custom attributes.
