Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

dataset属性与元素扩展数据操作

  HTML只是一种弱标记语言,我们可以在标记上随意扩展属性。这是一柄双刃剑,有时候很方便,有时候也会带来麻烦。HTML的版本也在不断升级,也许以后会引入更多的属性,所以使用自定义属性是有风险的。统一自定义属性是很有必要的,因此引入dataset。
  一些现代浏览器中为DOM元素提供了dataset对象来供开发者扩展自己的HTML属性。dataset对象的property与DOM元素中带“data-”前缀的attribute是自动关联的。这是很好的特性,但是也因此让dataset失去了存储临时内存对象的功能。因为attribute的值只能是字符串,既然和dataset的property对应起来了,那么dataset的property也只能是字符串。
  注意:IE从11版才开始兼容dataset,所以需要兼容IE10-的项目只能另辟新径了。 <span data-author="次碳酸钴">Hello World</span>
<script>
var span=document.querySelector("span");
//从dataset的property访问data前缀的attribute
console.log("Author:"+span.dataset.author);
//写入dataset的property可以从data前缀的attribute中访问
span.dataset.site="Web技术研究所";
console.log("Site:"+span.getAttribute("data-site"));
//只能存储字符串
span.dataset.self=span;
console.log(typeof span.dataset.self); //string
span.dataset.number=1234567;
console.log(span.dataset.number===1234567); //false
</script>
  相关知识:
    Attribute和Property的区别
    元素属性操作的浏览器差异
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^