Many web developers are using HTML5, as it provides them with new and improved ways to organize content in web pages. More importantly, the latest revision of HTML markup language help makes the coding process easier and relevant for developers. What’s more? HTML5 has introduced impressive features that help run content-heavy sites on small touchscreen displays, integrate vector graphics easily and so on.
Regardless of the exciting features HTML5 has implemented in modern browsers, many developers still seem to be unaware of the useful APIs it offers. The agenda of this post, however, is not to throw light upon the long list of APIs and will rather provide better understanding of the HTML5 DataSet API. In order to explain how you can use the DataSet API, I’ll show an example where you’ll learn to create a popup.
A Look Into DataSet API
Back in the HTML4 days, developers didn’t have many options to store arbitrary data (ideally arbitrary snippets of metadata). And they use to store the data on DOM elements, but that isn’t the right place to store arbitrary data. But thanks to the HTML data attribute spec, developers were rendered the ability to embed custom attributes on all HTML elements using the prefix “data-”. And to work with data attributes, HTML also introduced an API named as the DataSet API. Before diving into details about the dataset API, let’s first know about data attributes.
Data attributes (or custom data attributes) in HTML store arbitrary values as strings in a site’s JavaScript. Here’s a simple example that will help you know how useful data attributes are:
<div id="element" class=”level_1 points_100 opponent_Dragon”></div>
The above line contains JavaScript code, where a game level is defined along with the points scored by a particular opponent. In the above code, you can see that the class attribute looks messy and difficult to understand. Adding more attributes to the class will make the code hardly comprehensible. And so, we can make errors while writing the class attributes. But, thanks to HTML5 data attributes we can perform the same task easily:
<div id="element" data-level="1" data-points="100" data-opponent="Dragon"></div>
In this line of code, you can see we have added “data-” prefix with the class attributes, making it easy to recognize each and every attribute name and its value. However, managing data attributes can become complicated at times, and to resolve such problem DataSet API was implemented.
As we had discussed previously, HTML5 released many new APIs such as High Resolution Time API, Navigation API, Battery Status API and many others. And the one we’re discussing in this post is the dataset API that helps in setting, creating, retrieving and deleting attribute values.
1. Setting Values
Let’s say, we want to add an attribute named data-user to our element and set its value to ’emily’. For this purpose, you will need to write the following code:
document.getElementById("element").dataset.user = "emily";
2. Getting Values
There’s no use of creating attributes if we can’t fetch them. Let’s assume we need to print data-final-opponent attribute value to the console. This can be done using the following line of code:
console.log(document.getElementById("element").dataset.finalOpponent);
//prints "Dragon"
3. Deleting Attributes
Finally, the dataset API deletes an attribute value by overwriting it using the empty string, using the delete operator as shown in the code below.
delete document.getElementById("element").dataset.finalOpponent;
How Is DataSet API Different From Data Attributes?
The DataSet API returns a “DOMStringMap” object of the data-attributes elements present in your document. The dataset API rather than adding “data-” prefix to the attribute names, convert the name to camelCase. Let us look at an example containing data attributes:
<div id="messagelist" data-user="emily" data-maxage="100" data-list-size="5"></div>
In this code, we have defined three data attributes names: data-user, data-maxage and data-list-size. These attributes names will be converted to CamelCase as follows:
- data-user name: gets converted to user
- data-maxage: gets converted to maxage
- data-list-size: gets converted to listSize
Example to Demonstrate How to Use Dataset API and jQuery
Here I am writing a working example to show how you can create custom attributes with the help of the HTML5 dataset API. Additionally, you will see how you can create several effects using jQuery. In the below example, I am creating a popup that displays the list of custom attributes created using the dataset API.
HTML Structure
jQuery Structure
$(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);
});
});
Output:
Final Thoughts
Observing the growing complexity of websites and applications, it has become needful to seek ways that could help us hold more information without much hassle. But, if you’re still stuck to using the “class names” or “rel attributes” as your elements and store them on DOM to make your JavaScript simplified, it’s better you should add the new HTML5 dataset API to your toolbox. Not only this dataset property helps in managing complex data, but is also supported by modern browsers. So, any browser that supports HTML5 can access the dataset API as well.
To help you provide better understanding of how you can use the HTML5 DataSet API, I have provided a useful example that allows creating a popup using the attributes created using the DataSet API.
