html5自定义数据属性,[HTML5]自定义数据属性

原文见 HTML 5 data- Attributes   http://ejohn.org/blog/html-5-data-attributes/

自定义数据属性是在HTML5中新加入的一个特性。对于规范来说，好像有点怪异–但他的确提供了一些便利。

简单来说，自定义数据属性规范规定任何以data-开头的属性都将被视为私有数据的存储区域(”私有”在这里的意思是最终用户无法看到他-他不会影响页面的布局和表现)

这允许你书写有效的HTML标记的同时，嵌入数据到你的网页中去。简单示例如下：

data-lang="js" data-food="Bacon">

John says: Hello, how are you?

上面的代码完全符合HTML5的规范。对所有的javascript开发者来说这是一个很受欢迎的新特性。一直以来我们都在需求一种最好的用有效地方式添加元数据到htmL元素的方法，框架用各种不同的方式去解决这一问题。一下是两种解决方案：

1)使用HTML，但自定义DTD。

2)使用XHTML，与特定的命名空间。

The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.

On top of this a simple JavaScript API is presented to access these attribute values (in addition to the normal get/setAttribute):

var user = document.getElementsByTagName("li")[0];

var pos = 0, span = user.getElementsByTagName("span")[0];

var phrases = [

{name: "city", prefix: "I am from "},

{name: "food", prefix: "I like to eat "},

{name: "lang", prefix: "I like to program in "}

];

user.addEventListener( "click", function(){

var phrase = phrases[ pos++ ];

// Use the .dataset property

span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];

}, false);

这种.dataset用法看起来很像.attributes的用法(但是他只是作为key-value 对)，由于现在还没浏览器实现这一DOM特性，对他的需求并不是很大-因此上面的代码可以被替代为：

span.innerHTML = phrase.prefix +

user.getAttribute("data-" + phrase.name );

我认为最令人兴奋的是我们可以在所有的浏览器去实现这些特性之前就可以使用它们。现在在你的网页上使用这种特性，那你可以很明确的知道他们在未来可以继续有效。当HTML验证完全整合到W3C的认证当中的时候，你的网站讲兼容他们(当然，假设你已经通过HTML5的验证并且正在使用HTML5的Doctype)

参考资料： http://www.w3ctech.com/w/index.php?doc-view-69