认识 HTMLElement.dataset

认识 HTMLElement.dataset

官方解释：HTMLElement.dataset - Web APIs | MDN (mozilla.org)

做些低代码碰到一个标签传参的问题，通过标签 dataset 解决的

01 dataSet 是什么东西？

它是 H5 标准允许你在普通的元素标签里，嵌入类似 data-*的属性，来实现一些简单数据的存取。常见的使用场景，比如有些标签，你是想带入一些参数的，方便其他页面拿到标签，可以获取其中的参数，就可以使用 dataset 进行数据预设或存储。

02 使用案例

• 利用 DOM 节点 getAttribute

<div id="article" data-id="1" data-author="DuoR">文章</div>

// 通过 getAttribute
var article = document.getElementById('article')
var id = article.getAttribute('data-id')
var author = article.getAttribute('data-author')

• 利用 dataset API

  通过 dataset API，我们可以更方便的获取元素的所有 data 字段，并以对象的方式，方便存取和遍历

// dataset API
var article = document.getElementById('article')
var ds = article.dataset
var id = ds.id
var author = da.author