html自定义属性无法获取,web前端：H5对自定义属性的规定和添加获取自定义属性的方法...

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改(这是一项推荐标准、外语原文:W3CRecommendation)。

元素属性那么多，如何区分是自带的属性还是默认的属性呢？

H5规定自带的属性有个data-前缀，如data-index="1"，那么,如何设置和获取属性值呢,请看下文。

vardivele=document.querySelector("div");

//我们常用的添加和获取自定义属性

divele.setAttribute("flag",1);

console.log(divele.getAttribute("flag"));

//属性那么多，如何区分是自带的属性还是默认的属性呢？

//H5规定自带的属性有个data-前缀，如data-index="1"

divele.setAttribute("data-index",1);

console.log(divele.getAttribute("data-index"));//兼容性比较好

//H5新增的获取属性值得方法,元素对象.dataset.index，dataset是个自定义属性(规范的data-开头)的集合

console.log(divele.dataset.index);

//divele.dataset[`index`]获取对象属性的第二种方式

console.log(divele.dataset[`index`]);

//问题来了,如果自定义属性被很多连接符拼接而成呢？

divele.setAttribute("data-temp-name",2);

//获取的时候用驼峰法

console.log(divele.getAttribute("data-temp-name"));//这种方式正常写

console.log(divele.dataset.tempName);

console.log(divele.dataset[`tempName`]);

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的web。