Data-* of HTML5 custom attributes and html5 custom data-

Data-* of HTML5 custom attributes and html5 custom data-
HTML5 adds a new function: custom data attributes, that isdata-*Custom Attributes. In HTML5, we can usedata-Prefix to set the custom attributes we need to store some data. Of course, advanced browsers can use scripts to define and access data. It is useful in project practice.

<Input type = "button" value = "button" data-index = "10" data-index-color = "red">

Before getting started, let's take a look at how I got custom attributes.

 

Var oBtn = document. querySelector ('input'); console. log (oBtn. value); // button console. log (oBtn. index); // undefinedconsole. log (oBtn. dataIndex); // undefined

 

It is not surprising why the next two undefined appear, because the following points only comply with W3C specifications when allowed, and all the properties that do not comply with are killed by the browser. But there is still a way to get custom attributes. The Code is as follows:

Var oBtn = document. querySelector ('input'); console. log (oBtn. getAttribute ('value'); // click the console. log (oBtn. getAttribute ('index'); // 10console. log (oBtn. getAttribute ('data-Index'); // 10

Of course, the change and deletion are ele. setAttribute (name, value) and ele. removeAttribute (name), which works properly in all modern browsers, but is not customized in HTML 5.data-*The purpose of using the property. Otherwise, it is no different from the custom property we used previously. I will not talk about it here.

 

Now HTML5 has addeddatasetAttribute to accessdata-*The value of the custom attribute. ThisdatasetAttribute is part of the HTML5 JavaScript API and is used to return all the selection elements.data-The DOMStringMap object of the attribute. When using this method, the complete attribute name is not used, as shown in figuredata-indexTo access data, removedata-Prefix.

Note that:data-If the property name contains a hyphen, for example:data-index-colorAnd the name will be removed and converted to a camper name. The preceding attribute name should be:indexColor. The Code is as follows:

<! Doctype html> Console. log (oBtn. dataset); // DOMStringMap object console. log (oBtn. dataset. index); // 10console. log (oBtn. dataset. indexColor); // redconsole. log (oBtn. index); // undefined

Console. log ('name' in oBtn. dataset); // falseoBtn. dataset. name = 'zpf '; console. log ('name' in oBtn. dataset); // trueoBtn. dataset. index = 100; console. log (oBtn. dataset. index); // 100oBtn. index = 20; console. log (oBtn. index); // 20 </script> </body>  
 
 
By the way, let's take a look at the console output diagram of the above Code as follows:

We can see the index attribute in the input above, and use oBtn directly. index. This is undefined. We used JS to set oBtn for it. index = 20, but the index in the tag in his page is still equal to 10. If we want to get the JS settings that match the HTML structure, we can only use setAttribute and getAttribute.
Now let's take a look at the data-method. The settings, acquisition, and changes correspond to the Internal Attributes of HTML tags, and are easier to operate than before,So in the future, we want to save some attributes and add a data-In front. In this way, these attribute values will be stored in an object for management and traversal.
for(var name in oBtn.dataset){    console.log(oBtn.dataset[name]);    }
If you want to deleteData-attributes, You can do this: delete el. dataset. id; or el. dataset. id = null ;.