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>
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.
The above is the detailed content of Dataset in HTML. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.

Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.

Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen

Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.

To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this

When using HTML5Geolocation API to obtain user location, you must first obtain user authorization, and request and explain the purpose at the right time; the basic method is navigator.geolocation.getCurrentPosition(), which contains successful callbacks, wrong callbacks and configuration parameters; common reasons for failure include permission denied, browser not supported, network problems, etc., alternative solutions and clear prompts should be provided. The specific suggestions are as follows: 1. Request permissions when the user operation is triggered, such as clicking the button; 2. Use enableHighAccuracy, timeout, maximumAge and other parameters to optimize the positioning effect; 3. Error handling should distinguish between different errors

Using HTML5 semantic tags and Microdata can improve SEO because it helps search engines better understand page structure and content meaning. 1. Use HTML5 semantic tags such as,,,, and to clarify the function of page blocks, which helps search engines establish a more accurate page model; 2. Add Microdata structured data to mark specific content, such as article author, release date, product price, etc., so that search engines can identify information types and use them for display of rich media summary; 3. Pay attention to the correct use of tags to avoid confusion, avoid duplicate tags, test the effectiveness of structured data, regularly update to adapt to changes in schema.org, and combine with other SEO means to optimize for long-term.
