在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-*的更多相关文章

  1. 转:HTML5中的element.dataset

    使用HTML5中的 element.dataset 操作自定义 data-* 数据: 不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进 ...

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

    不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增.删改的接口,完全可以替代jQuery里的那些CSS类操作方法.而另外一个非常有用 ...

  3. HTML5中的自定义属性data-*

    在html5中,给元素添加自定义属性需要用到data-*,比如data-name,添加完data-自定义属性之后通过元素的dataset属性来访问其值. dataset与getAttribute/se ...

  4. WCF分布式开发步步为赢(8):使用数据集(DataSet)、数据表(DataTable)、集合(Collection)传递数据

    数据集(DataSet).数据表(DataTable).集合(Collection)概念是.NET FrameWork里提供数据类型,在应用程序编程过程中会经常使用其来作为数据的载体,属于ADO.NE ...

  5. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

  6. 机器学习数据集,主数据集不能通过,人脸数据集介绍,从r包中获取数据集,中国河流数据集

    机器学习数据集,主数据集不能通过,人脸数据集介绍,从r包中获取数据集,中国河流数据集   选自Microsoft www.tz365.Cn 作者:Lee Scott 机器之心编译 参与:李亚洲.吴攀. ...

  7. 数据集DataSet

    ADO.NET数据访问技术的一个突出的特点就是支持离线访问,而实现这种离线访问技术的核心就是DateSet对象,该对象通过将数据驻留在内存来实现离线访问. DataSet对象由一组DataTable对 ...

  8. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  9. HTML5中的Blob对象的使用

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

随机推荐

  1. Android开发 内存泄露检测框架LeakCanary

    前言 挖坑后续填坑 中文网站:https://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ gitbub:https://github.com/squ ...

  2. CF1166D——数学公式思维题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll ans[],a,b,m; /* b=2^(n-2) ...

  3. LUOGU P1613 跑路 (倍增floyd)

    解题思路 倍增$floyd$,首先设$f[i][j][k]$表示$i$这个点到$j$的距离能否为$2^k$,初值是如果x,y之间有边,那么$f[x][y][0]=1$.转移方程就是$f[i][j][t ...

  4. poj 3660 Cow Contest (bitset+floyd传递闭包)

    传送门 解题思路 考试题,想到传递闭包了,写了个O(n^3)的,T了7个点...后来看题解是tm的bitset优化???以前好像没听过诶(我太菜了),其实也不难,时间复杂度O(n^3/32) #inc ...

  5. OpenCASCADE点向圆柱面投影

    OpenCASCADE点向圆柱面投影 eryar@163.com OpenCASCADE的类Extrema_ExtPElS提供了点到基本曲面的投影计算功能,距离可能是最大值或是最小值.如下图所示的点到 ...

  6. ie浏览器下载附件中文乱码

    String llq = request.getHeader( "USER-AGENT" ).toLowerCase();Boolean isIE = false;if (llq. ...

  7. 04_jQuery对象初识(三)

    <div id="d1"> <p><span>span</span></p> <div>div</di ...

  8. java笔试之求int型正整数在内存中存储时1的个数

    输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 关键点:n与二进制的1相与:判断最末位是否为1:向右移位. 类似题目是查找输入整数二进制中1的个数. package test; ...

  9. vue.js组件的个人总结

    vue.js的组件使用过程分为三个步骤:1.创建组件构造器: 2.注册组件: 3.使用组件 组件同时也分为全局组件与局部组件 1.全局组件 2.局部组件 注意:由于 HTML 标签不区分大小写,所以在 ...

  10. Django项目:CRM(客户关系管理系统)--82--72PerfectCRM实现CRM动态菜单和角色

    #models.py # ————————01PerfectCRM基本配置ADMIN———————— from django.db import models # Create your models ...