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.key

This 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 (data-*/a>). Obtaining the 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>