Benjamin - 专注前端开发和用户体验

HTML5 Element.dataset 初探

JAVASCRIPT Benjamin 901℃ 0评论

一. 我是谁
HTMLElement.dataset 属性允许我们访问所有在元素上自定义的data属性 (这种属性一般以data-开头). 它的结构是一个DOMString映射表,对每一个自定义的数据属性都有一个实体与之对应。

自定义的数据属性名称是以 data- 开头的。 它必须要遵循 the production rule of xml names 规则,该规则是说它只可以包含字母,数字和下面的字符: dash (-), dot (.), colon (:), underscore (_)。此外不应包含ASCII 码大写字母。

自定义的data 属性名称转化成 DOMStringMap 的键值时会遵循下面的规则:

  • 前缀  data- 被去除(包括减号);
  • 对于每个在ASCII小写字母 a到 z前面的减号 (U+002D),减号会被去除,并且字母会转变成对应的大写字母。
  • 其他字符(包含其他减号)都不发生变化

与此相反的转换,即将键值转换为一个属性的名称,会遵循下面的规则:

  • 约束:减号在转变前一定不能紧跟一个ASCII小写字母 a 到 z之间;
  • 添加 data- 前缀;
  • 任何ASCII大写字母 A 到 Z 将转化成一个减号紧跟对应的小写字母;
  • 其他字符不会发生变化

二. 我从哪里来
HTMLElement.dataset 属性在HTML5中被标准化,参考规范:HTML Living Standard — Last Updated 8 March 2016. 现在已经得到大多数浏览器的支持,IE11+,Chrome,Firefox,Safari,iOS Safari ,具体参见Can I Use dataset

三. 我能干什么
1. 实例一:

<div data-name="张三" data-sex="男" data-year-month-day="2016-02-22" data-birth-87-event="出生日期" id="user">专注前端开发及用户体验</div>
// 包含数字时key的名称转换略有不同
// Object {birth-87Event: "出生日期", yearMonthDay: "2016-02-22", sex: "男", name: "张三"}
console.log( $('#user').data() );

// DOMStringMap {name: "张三", sex: "男", yearMonthDay: "2016-02-22", birth-87Event: "出生日期"}
console.log(document.getElementById('user').dataset)

可以直接把标签上data-*属性转换为DOMStringMap, 就是我们常见的键值对的形式.

2. jQuery 3.0 Beta Released 中为更好的匹配规范 已经使用dataset改进了.data()方法.
具体参见:jQuery 3.0 Beta Released和jQuery blog: jQuery 3.0 Beta Released 2016-01-14

3. 操作data-xxx属性将更为方便和高效

domobj.dataset.name = "Benjamin";

性能对比:getAttribute(‘data-name’) VS domObj.dataset.name

4. 不支持dataset怎么办捏,这里有个polyfill html5-dataset.js

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址