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 ...
随机推荐
- Func-Chain.js 另一种思路的javascript异步编程解决方案
本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...
- CF1163E Magical Permutation
题意:给定集合,求一个最大的x,使得存在一个0 ~ 2x - 1的排列,满足每相邻的两个数的异或值都在S中出现过.Si <= 2e5 解:若有a,b,c,令S1 = a ^ b, S2 = b ...
- 【Uva 1220】Party at Hali-Bula
[Link]:https://cn.vjudge.net/contest/170078#problem/M [Description] 求一个树的最大独立子集; (即树的一个点集,这个点集中任意两个点 ...
- EF 中获取 TableAttribute的值,即数据库中真实的表名
比如EF中我定义了这样一个实体: [Table(Name = "MyTableName")] public class MyClass { } [Table(Name = &quo ...
- 根据url提取网站域名的方法小结
前言:最近使用到了他人总结的一个基础类库.查看了下源码,发现String帮助类的一个辅助方法不是很严谨,重构之. 1.原来程序的写法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- 转-VS2010常用功能使用介绍
原文链接:http://www.jizhuomi.com/software/27.html 1.几个基础概念 在讲VS2010之前先讲下程序开发过程中的几个基本概念:源程序.目标程序和翻译程序. 源程 ...
- 关于获取webview(窗口间关系)的方法
1.获取指定页面ID的webview plus.webview.getWebviewById('为页面设置的id值'): 该方法主要用于首页底部导航切换到子页面时不执行子页面的函数,因为在设置导航的时 ...
- TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习
自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...
- sqlserver2005分页存储过程
Create proc [dbo].[sp_AbiTableLoad] ---------------------------------------------- -- 单表多表分页存储过程 -- ...
- 2019-8-30-Jenkins-配置自动合并-release-分支到-master-分支
title author date CreateTime categories Jenkins 配置自动合并 release 分支到 master 分支 lindexi 2019-08-30 08:5 ...