The Older version of HTML, HTML4 developers have tried to make the storage of arbitrary data associated with the DOM so anyone can come up with their own attributes, but it is risky.Sometimes you personally try to add code which might be incorrect or take a time to develop and all browser does not support such developed code.
Therefore, most web developers rely on class or rel attribute defined in HTML. For example, I want to apply some effect on some HTML element, I prefer to add the Id to the class or use unique id for each element.Do you want to any element to identify a certain custom elements you require?
Now we look at how HTML5 can solve this problem. A new feature being introduced in HTML5 which is known as custom data attributes.HTML5 data-* attribute is user-defined custom attributes which are used to allow users to define their own attributes and it must start with “data-“.
Now this the time to understand the data attribute of HTML5.
What is HTML5 data attributes
Fortunately, HTML5 introduces custom data attributes. You can use any name to lowercase but prefixed with data-{attributeName}.
SYNTAX:
1 2 3 | <div id = "divid" data-author = "Bhumi" data-site = "www.thecreativedev.com"> </ div> |
The above syntax is perfectly valid HTML5 code with two custom attributes called data-author and data-site. You will get the values of these attributes using JavaScript APIs,jQuery with the similar way you get the standard attributes.
The custom data attributes :
- It should be used only when no suitable HTML5 attribute exists.
- Unlike microformat, data attribute should be ignored by the search bots.
- You can pass any type of data.If you want to combine multiple data, you can combine as JSON encoded format and decoded it using javascript JSON decoder.
How to get data using getAttribute and setAttribute JavaScript
You can get and set data-{attribute} using the JavaScript getAttribute and setAttribute and all browsers support it.
This example will explain to you how to use getAttribute and setAttribute with data-?
1 2 3 4 5 6 7 8 9 | var divid = document.getElementById ("divid"); var authorName = divid.getAttribute ("data-author"); var newAuthorName = 'Bhumi Shah'; divid.setAttribute ("data-author", newAuthorName); alert(newAuthorName); |
getAttribute: This method gets the specified name corresponding attribute value.
SYNTAX:
1 2 3 | Object.getAttribute(attributeName); |
attributeName is the name of the attribute and it is required. It returns the value assigned to an attribute.
setAttribute: This method sets the specified name corresponding attribute value.
SYNTAX
1 2 3 | Object.setAttribute (attributeName , attributeValue) |
Parameters:
attributeName: This parameter is required and type can be a string which contain the name of an attribute.
attributeValue: This parameter is also required and type can be the string, number, or Boolean which contain the value of an attribute.
This method works but only used for older browsers which do not support HTML5.
How to use jQuery data () method?
jQuery has in-built method data () from the version 1.4.3 which is for the HTML5 data attributes.Using jQuery .data () method to access these “data- *” attribute.You do not need to specify a prefix data- {attribute}.
The following example shows you how you can use jQuery data () method.
1 2 3 4 5 6 | var authorName = $("#divid").data ("author"); //This is return the name of author. alert(authorName); var newAuthorName = $("#divid").data ("author", 'Bhumi Shah');//This will set the new author name alert(newAuthorName); |
In above code you can see that, can directly assign the data through the .data (key, value) method.
But jQuery method data () is not physically change the attribute.jQuery data() function set the new value in the memory. It doesn’t change the attribute in the DOM.To change the attribute in DOM(browser), you have to use:
1 2 3 | $('#divid').attr('data-author', 'Bhumi Shah'); |
HTML5 DataSet
HTML5 itself provides the traditional method which dataset Properties which is a standard way to attach additional data. A dataset property is a support to set or get the corresponding element of data- attributes.In short, Using a dataset, You can access your custom data attributes.
Here is an example of dataset property attributes:
1 2 3 4 5 6 | var divid = document.getElementById ("divid"); var authorName = divid.dataset.author; alert(authorName); divid.dataset.author = 'Bhumi Shah'; //This function change the value of author |
To obtain the corresponding values od data-* attribute, dataset properties is used.Data attribute is essentially supported by all latest browsers, but the dataset property is newly defined so currently it support in some specifically compatible versions of browsers.
If you are interested in doing some demo for HTML5 data attribute, share with me.I would like to see your experiments.
Comments (1)