HTML5中的数据集dataset和自定义属性data-*
在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。
dataset与getAttribute/setAttribute的对比
在此之前的访问属性的方式我们用getAttribute/setAttribute
- html 结构:
<div id='div' name='divName'>我是div</div>
- javascript结构:
var div = document.getElementById('div');
console.log(div.getAttribute('name')); // divName
div.setAttribute('gender','male');
console.log(div.getAttribute('gender')); // male
现在我们来使用html5中的自定义属性 data-*
- html 结构:
<p data-name='pName' data-nick-name='dear pName' data-gender='female' myname='数据集访问不到'>我是p</p>
- javascript结构:
var p = document.querySelector('p');
console.log(p.dataset.name); // pName
console.log(p.dataset.nickName); // dear Name
console.log(p.dataset.gender); // female
console.log(p.dataset); // DOMStringMap {name: "pName", nickName: "dear pName", gender: "female"}
console.log(p.myname); // undefined
总结
从上面的代码我们可以知道,dataset属性值是DOMStringMap的一个实例,也就是一个键值对的映射,其实自定义属性很早就已经开始使用了,像京东,淘宝这些电商网站,审查他们的页面,可以看到很多。如果需要给元素添加一些不可见的数据以便进行其他处理,那就要用到自定义数据属性。在跟踪链接或者混搭应用中,通过自定义数据属性能方便地知道点击来自页面中的哪个部分。
问答题:`data-`属性的作用是什么?
`data-`为H5新增的为前端开发者提供自定义的属性,这些属性集可以通过对象的 `dataset` 属性获取,不支持该属性的浏览器可以通过`getAttribute` 方法获取
需要注意的是:`data-`之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。即:当没有合适的属性和元素时,自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
参考: HTML5中的数据集dataset和自定义属性data-*
HTML5中的数据集dataset和自定义属性data-*的更多相关文章
- 转:HTML5中的element.dataset
使用HTML5中的 element.dataset 操作自定义 data-* 数据: 不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进 ...
- 使用HTML5中的element.dataset操作自定义data-*数据
不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增.删改的接口,完全可以替代jQuery里的那些CSS类操作方法.而另外一个非常有用 ...
- HTML5中的自定义属性data-*
在html5中,给元素添加自定义属性需要用到data-*,比如data-name,添加完data-自定义属性之后通过元素的dataset属性来访问其值. dataset与getAttribute/se ...
- WCF分布式开发步步为赢(8):使用数据集(DataSet)、数据表(DataTable)、集合(Collection)传递数据
数据集(DataSet).数据表(DataTable).集合(Collection)概念是.NET FrameWork里提供数据类型,在应用程序编程过程中会经常使用其来作为数据的载体,属于ADO.NE ...
- HTML5中的data-*属性和jQuery中的.data()方法使用
原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...
- 机器学习数据集,主数据集不能通过,人脸数据集介绍,从r包中获取数据集,中国河流数据集
机器学习数据集,主数据集不能通过,人脸数据集介绍,从r包中获取数据集,中国河流数据集 选自Microsoft www.tz365.Cn 作者:Lee Scott 机器之心编译 参与:李亚洲.吴攀. ...
- 数据集DataSet
ADO.NET数据访问技术的一个突出的特点就是支持离线访问,而实现这种离线访问技术的核心就是DateSet对象,该对象通过将数据驻留在内存来实现离线访问. DataSet对象由一组DataTable对 ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- HTML5中的Blob对象的使用
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...
随机推荐
- Python-函数基础(2)
目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...
- ROC曲线及AUC
ROC曲线 意义 ROC曲线指受试者工作特征曲线 / 接收器操作特性曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,是用 ...
- 对XP上的KiFastSystemCall进行浅析
Windows API的系统调用过程通过KiFastSystemCall或int 2e进入内核,本文仅对XP上的KiFastSystemCall进行浅析. 以ntdll!ZwCreateProcess ...
- Bash Specially-crafted Environment Variables Code Injection Vulnerability Analysis
http://www.cnblogs.com/LittleHann/p/3992778.html
- 服务器IP配置功能实现小结
1. 服务器网卡配置文件 /etc/sysconfig/network/ifcfg-***(eth0) linux-f1s9:/etc/sysconfig/network # cat ifcfg-et ...
- Java超简明入门学习笔记(二)
Java编程思想第4版学习笔记(二) 第三章 操作符 & 第四章 控制执行流程(流程控制语句) 第三章和第四章的内容主要是讲操作符和流程控制语句,Java的大多数操作符和流程控 ...
- python jieba模块详解
借鉴于 [jieba 模块文档] 用于自己学习和记录! jieba 模块是一个用于中文分词的模块 此模块支持三种分词模式 精确模式(试图将句子最精确的切开,适合文本分析) 全模式(把句子在所有可以成词 ...
- 牛客NOIP暑期七天营-提高组6
目录 A-积木大赛 题目描述 link 题解 代码 B-破碎的序列 题目描述 link 题解 C-分班问题 题目描述 link 题解 比赛链接 官方题解 A-积木大赛 题目描述 link 题解 标签: ...
- 如何使用log4j记录日志
1.下载jar包 http://logging.apache.org/log4j 2.将jar包加入项目 放在lib(没有就创建)下 对已经复制过来的jar包鼠标点击右键,选中BuildPath - ...
- SQL语句中GROUP BY的问题
今天查询数据库时用到集合函数sum(drp),遇到问题: 百度后,确定如下问题:当select后面查询字段有sum(drp)以外的字段时,必须使用group by函数,对数据进行排序,且查询字段中除s ...