举个栗子:

 <div id="cost" data-drink="coffee"  data-food="sushi" data-meal="lunch">¥20.12</div>

现在我们想要获取这个div,那么:

 var cost = document.getElementById('cost');

接下来我们想要获取属性data-drink的值,我们通常会这样去做:

var typeOfDrink = cost.getAttribute("data-drink");

那么通过dataset,我们可以这样获取data-drink的值:

var typeOfDrink = cost.dataset.drink;

所以既然我们可以通过getAttribute获得属性,那么dataset存在的意义是什么呢?

假如我们想获取div所有的data属性,那么我们通过attribute方法需要通过循环遍历。

所有dataset的意义来了,它一句话就可以获取所有属性:

var expense = document.getElementById('cost').dataset;

每次你使用自定义data属性的时候,使用dataset去获取名-值对就是个不错的选择。

当然这个要考虑兼容性,具体问题具体分析,欢迎指正。

关于dataset的更多相关文章

  1. HTML5 数据集属性dataset

    有时候在HTML元素上绑定一些额外信息,特别是JS选取操作这些元素时特别有帮助.通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值.但为此付出的代价是文档将 ...

  2. C#读取Excel,或者多个excel表,返回dataset

    把excel 表作为一个数据源进行读取 /// <summary> /// 读取Excel单个Sheet /// </summary> /// <param name=& ...

  3. DataTable DataRow DataColumn DataSet

    1.DataTable 数据表(内存) 2.DataRow DataTable 的行 3.DataColumn DataTable 的列 4.DataSet 内存中的缓存

  4. C# DataSet装换为泛型集合

    1.DataSet装换为泛型集合(注意T实体的属性其字段类型与dataset字段类型一一对应) #region DataSet装换为泛型集合 /// <summary> /// 利用反射和 ...

  5. 读取Simulink中Dataset类型的数据

    http://files.cnblogs.com/files/pursuiting/%E5%80%92%E7%AB%8B%E6%91%86%E6%8E%A7%E5%88%B6%E7%B3%BB%E7% ...

  6. RDD/Dataset/DataFrame互转

    1.RDD -> Dataset val ds = rdd.toDS() 2.RDD -> DataFrame val df = spark.read.json(rdd) 3.Datase ...

  7. asp.net dataset 判断是否为空 ?

    1,if(ds == null) 这是判断内存中的数据集是否为空,说明DATASET为空,行和列都不存在!! 2,if(ds.Tables.Count == 0) 这应该是在内存中存在一个DATASE ...

  8. C#遍历DataSet中数据的几种方法总结

    //多表多行多列的情况foreach (DataTable dt in YourDataset.Tables) //遍历所有的datatable{foreach (DataRow dr in dt.R ...

  9. c#解析XML到DATASET及dataset转为xml文件函数

    //将xml对象内容字符串转换为DataSet         public static DataSet ConvertXMLToDataSet(string xmlData)         { ...

  10. C# DataSet

    一.基本概念 DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立,就是说,即使断开数据链路,或者关闭数据库,Dat ...

随机推荐

  1. SQL-W3School-高级:SQL NULL 函数

    ylbtech-SQL-W3School-高级:SQL NULL 函数 1.返回顶部 1. SQL ISNULL().NVL().IFNULL() 和 COALESCE() 函数 请看下面的 &quo ...

  2. oracle 中SQL 语句开发语法 SELECT INTO含义

    oracle 中SQL 语句开发语法 SELECT INTO含义 在ORACLE中SELECT INTO是如何使用的,什么意思?和SQL SERVER的不一样?   和sqlserver的不一样sql ...

  3. [maven][转]pom配置之:snapshot快照库和release发布库

    在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...

  4. mybatis plus foreach 的用法

    一: foreach 用于 select * from tablename where colname in (A,B,C……); 1:service 层: Set<String> tea ...

  5. MATLAB常用快捷键总结

    MATLAB 命令栏显示处理的常用命令 清屏:clc 紧凑显示格式:format compact 宽松显示格式:format loose 数据高精度显示:format longG 数据低精度显示:fo ...

  6. Python将多个excel表格合并为一个表格

    Python将多个excel表格合并为一个表格 生活中经常会碰到多个excel表格汇总成一个表格的情况,比如你发放了一份表格让班级所有同学填写,而你负责将大家的结果合并成一个.诸如此类的问题有很多.除 ...

  7. 1-18-1 LVM管理和ssm存储管理器使用&磁盘配额(一)

    LVM管理和ssm存储管理器使用&磁盘配额(一) LVM逻辑卷的管理 问题:对于生产环境下的服务器来说,如果存储数据的分区磁盘空间不够了怎么办? 因为如果要把一个分区的内容都拷贝到另一个分区上 ...

  8. DRF-路由

    路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...

  9. [PyTorch] Facebook Research - Mask R-CNN Benchmark 的安装与测试

    Github项目链接:https://github.com/facebookresearch/maskrcnn-benchmark maskrcnn_benchmark 安装步骤: 安装Anacond ...

  10. 【ARM-Linux开发】【Qt开发】Qt Creator自定义编译运行步骤

    原文:http://www.linuxidc.com/Linux/2015-04/115763.htm 一直用Qt Creator开发.无它,只是因为linux下C++ IDE选择不多.同时因为我抛弃 ...