在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. Func-Chain.js 另一种思路的javascript异步编程解决方案

    本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...

  2. CF1163E Magical Permutation

    题意:给定集合,求一个最大的x,使得存在一个0 ~ 2x - 1的排列,满足每相邻的两个数的异或值都在S中出现过.Si <= 2e5 解:若有a,b,c,令S1 = a ^ b, S2 = b ...

  3. 【Uva 1220】Party at Hali-Bula

    [Link]:https://cn.vjudge.net/contest/170078#problem/M [Description] 求一个树的最大独立子集; (即树的一个点集,这个点集中任意两个点 ...

  4. EF 中获取 TableAttribute的值,即数据库中真实的表名

    比如EF中我定义了这样一个实体: [Table(Name = "MyTableName")] public class MyClass { } [Table(Name = &quo ...

  5. 根据url提取网站域名的方法小结

    前言:最近使用到了他人总结的一个基础类库.查看了下源码,发现String帮助类的一个辅助方法不是很严谨,重构之. 1.原来程序的写法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  6. 转-VS2010常用功能使用介绍

    原文链接:http://www.jizhuomi.com/software/27.html 1.几个基础概念 在讲VS2010之前先讲下程序开发过程中的几个基本概念:源程序.目标程序和翻译程序. 源程 ...

  7. 关于获取webview(窗口间关系)的方法

    1.获取指定页面ID的webview plus.webview.getWebviewById('为页面设置的id值'): 该方法主要用于首页底部导航切换到子页面时不执行子页面的函数,因为在设置导航的时 ...

  8. TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习

    自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...

  9. sqlserver2005分页存储过程

    Create proc [dbo].[sp_AbiTableLoad] ---------------------------------------------- -- 单表多表分页存储过程 -- ...

  10. 2019-8-30-Jenkins-配置自动合并-release-分支到-master-分支

    title author date CreateTime categories Jenkins 配置自动合并 release 分支到 master 分支 lindexi 2019-08-30 08:5 ...