关于HTML5的data-*自定义属性的总结

本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考，具体如下：

一、关于html元素的特性

1.html元素都存在一些标准的特性：

    id 元素在文档中的唯一标识符；

    title 有关元素的附加说明信息，一般通过工具提示条显示出来；

    lang 元素内容的语言代码，很少使用；

    dir 语言的方向，很少使用；

    className，与元素的class特性对应，考虑到与ECMAScript的保留字class的冲突，因此命名为className；

2.操作特性的方法：

    getAttribute() 获取相关特性，也可以获取到自定义的特性，区别于使用DOM元素的属性获取；   

    setAttribute() 设置相关特性； 

    removeAttribute() 删除相关特性；

3.关于获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别 ：

例如：

var header=document.getElementById('header');console.log(header.id);//headerconsole.log(header.getAttribute('id'));//headerconsole.log(header.title);//testconsole.log(header.getAttribute('title'));//testconsole.log(header.myTitle);//undefinedconsole.log(header.getAttribute('myTitle'));//monster1935

在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现：

getAttribute()既可以访问标准特性也可以访问自定义特性，而是用DOM元素本身属性访问html元素特性的时候只能访问标准特性。

原因：

html元素中只有标准特性才会以属性的形式添加到DOM对象中。

特殊情况：

有两类特性，虽有在DOM对象中有对应的属性名，但是属性的值与通过getAttribute()返回的值并不相同。

1.style特性：

使用DOM对象属性访问style的时候，返回的是一个对象，而使用getAttribute()方法获取的时候返回的是css文本。

2.事件处理程序（例如：onclick）：

使用DOM对象的属性访问的时候，返回的是一个JavaScript函数，而通过getAttribute()方法获取时返回的是javas代码。

使用方法：

只有在获取自定义特性的时候使用getAttribute()方法，操作DOM的时候，使用对象的属性来获取。

二、Html5中的自定义属性

1.Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。

2.使用getAttribute()方法以及setAttribute()方法操作自定义属性。

例如：

var user=document.getElementById('user');//使用attributes方法操作属性//获取相关属性值var name=user.getAttribute('data-name');console.log(name)//monster1935var age = user.getAttribute('data-age');console.log(age);//123//设置相关属性值user.setAttribute('data-sex','male');console.log(user.getAttribute('data-sex'));//male