Updated April 17, 2023
Introduction to Dataset in HTML
Dataset property can be used to retrieve data attributes more straightforwardly. For each custom data attribute, this property returns a DOMStringMap object with just entry. The HTML Element interface’s dataset read-only concept gives us how to read/write access to custom data attributes (data-*) on the specified elements. It offers a string map (DOMStringMap) that has an entry for each data-* property. Dataset is available both in DOM and HTML.
Syntax:
The Syntax is declared as
element.dataset.keyThis is the minimal creation of a dataset.
HTML datasets allow users to access data via conventional HTML tables and other structured markups. HTML datasets function similarly to XML datasets, with the exception that they can take advantage of the millions of tables that already exist! The HTML dataset was an obvious expansion because we flatten XML into a table structure. The dataset is a native property of an element that holds the data attributes; it’s hardly supported in IE11+ and Chrome 8+. Dataset item values are usually strings, although jQuery’s data() respects the types provided by. data (key, value). (Dataset returns DOMStringMap, while data() in jQuery returns a jQuery object.)
HTML DataSet
Users can use normal HTML tables and another structured markup as data sources with the Spry HTML dataset. HTML datasets function similarly to XML datasets, with the exception that they can take advantage of the millions of tables that are available. The HTML dataset was a natural expansion of the Spry Framework because we flatten XML into a table structure.
The HTML dataset comes with a set of utilities that you can use to alter it.
- getURL() – This function returns the value of the current URL in the dataset function Object() { [native code] }.
- setURL(“URL”) – This function specifies the path to the new file that will be utilised in the dataset.
- getSourceElementID() – Gets the ID of the page element that the dataset is based on.
- setSourceElementID(“theSourceID”) – This method is used to set or alter the ID of the data source page element.
- getRowSelector() returns the RowSelector that is currently in use.
- setRowSelector(“theRowSelector”) Sets a new RowSelector for the dataset.
- getDataSelector() – Returns the current DataSeelctor.
- setDataSelector(“theDataSelector”)-Sets a new DataSelector for the dataset.
Examples
For a valid HTML code
<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);In the above code snippet, the dataset property works the same as an attribute property. This code could be enriched using prefixes like content prefix which work better in the future. The key can be used as an object property of the dataset to set and read attributes, as in the element. dataset.key name. The object-properties bracket syntax can also be used to set and read attributes, as in element. dataset[keyname]. The in operator can be used to see if an attribute is present.
The dataset IDL attribute provides simple accessors for all of an element’s data-* attributes (<a href=”#attr-data-*”>data-*/a>). Obtaining the dataset (<a href=”#dom-dataset”>dataset/a>) The IDL attribute must return a DOMStringMap object associated with the following algorithms, which expose these attributes on their element:
<ahref="demo.html#domstringmap-0"> </a>Few things to be noted:
- The attribute name is no longer prefixed with the data- prefix.
- Any hyphen preceded by a lower-case letter in the name is eliminated, and the letter after it is transformed to uppercase.
- Other characters will be left alone. This means that any hyphen that isn’t followed by a lowercase letter stays the same.
Browser Support
The dataset is not compatible with all browsers (especially earlier versions of Internet Explorer). Let’s see the updated compatibility data in a table:
| Support | Versions | |||
| Desktop | Chrome | Edge | Firefox | Internet Explorer |
| 6 and 8 | Yes | 6 higher | 9 | |
| Mobile | Android | Edge | Opera | Samsung |
| 6 | Yes | Nil | Nil | |
Specifications /comment
In HTML5, things have changed in an attempt to make developing a standards-based homepage even easier, and that should make a big difference. Because the learning curve and failure rate of simply XML-based markup are too high, the data- attribute was created as a way to apply this approach. It’s critical to understand that data attributes aren’t attempting to replace namespaces or anything else. They give the tools required to *deployment* the functionality described above. One can use data- attributes in HTML to achieve RDFa, sophisticated formats, and even some type of namespacing. The most appealing aspect of this specification is that users don’t have to wait for any browser to implement it until they can start utilizing it. We can rest assured that if users start using data- prefixes on the HTML metadata today, it will continue to work in the future.
Run the following algorithm to get the name-value pairs of a DOMStringMap:
- Let list be a list of name-value pairs that is empty.
- Add a name-value pair to the list for each content attribute on the DOMStringMap’s associated element whose first five characters are the string “data-” and whose remaining characters (if any) do not include any ASCII upper alphas, in the order those attributes are listed in the element’s attribute list.
For a Basic HTML standard – Review Comment is no exact change from Latest HTML 5.1
Version HTML 5 – Review Comment (No change in the previous Standard)
Version HTML 5.1 – No affect from HTML 5.
Conclusion – Dataset in HTML
Finally, custom data attributes are a convenient way to store application data on web pages. HTML5 now allows us to incorporate custom data attributes in all HTML components. Until the introduction of these attributes, the only key to achieving a similar result (associating data to elements) was to use CSS classes in the elements.
Recommended Articles
This is a guide to Dataset in HTML. Here we discuss the Examples of Dataset in HTML along with the Specifications and comments. You may also have a look at the following articles to learn more –
