使用HTML5中的element.dataset操作自定义data-*数据

不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增、删改的接口,完全可以替代jQuery里的那些CSS类操作方法。而另外一个非常有用的API就是 element.dataset API,从火狐6和Chrome8起就开始对它有了支持。这个简单的API能够让用户getsetHTML页面元素上的data-*属性。下面我们来看看它是如何使用的!

想必大家都知道,我们可以给HTML元素添加自定义的data-*属性。你可以给这个属性起任何名字,但在使用element.dataset API时你需要主要以下一些规则:

  • element.dataset不能够直接拿来用,否者你会遇到报错提示
  • 用JavaScript里使用data-*属性名时,要把名称转变成驼峰式命名(Camel-Case)
  • 名称不能以xml打头
  • 名称里不能有大写字母

假设页面里有下面的元素存在:

<div id="myDiv" data-name="myDiv" data-id="myId"
       data-my-custom-key="This is the value"></div>

要想获取这个data-id属性,你的代码应该写成这样:

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

要想获取data-my-custom-key属性值,你的代码应该写成这样:

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

给自定义属性赋值的方法是这样的:

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" 
//         data-my-custom-key="Some other value"></div>

如果一个自定义属性并不存在,但在程序中你给它赋值,它会自动创建:

// Set new data- attribute
element.dataset.mootoolsFtw = "true";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" 
//data-my-custom-key="Some other value" data-mootools-ftw="true">
//</div>

也许你会认为data-*属性里可以存放对象,但事实上不行,dataset不会初始化这些对象。我不清楚dataset对长度的限制,但在里面存放大量的数据必定会是DOM变得臃肿不堪,很难调试。喜欢使用jQuery的朋友应该知道jQuery里也有相应的$.data()方法,没错,HTML5里的这个原生的dataset就是来替代它的,如果你的页面只需要简单的操作data-*自定义属性,就不需要引入这些体积越来越多的jQuery工具库了,不是吗?

阅读余下内容
 

《 “使用HTML5中的element.dataset操作自定义data-*数据” 》 有 3 条评论

  1. 问题:
    1.data-*属性不能有大写字母,是不是人们约定俗称的?我使用Data-My-CUSTOM-kEy=”value”测试,可以结果,这里重要的是js代码中只能使用驼峰格式myCustomKey;
    2.data-*属性不能xml开头。意思是不能出现data-xml-demo格式么?我js使用xmlDemo可以得到结果;这里的意思是最好不要用,会和别的有冲突的意思么?

    期待解答。

    使用环境:
    chrome,版本 34.0.1847.131 m
    Firefox:27.0.1

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号