在这篇文章中，我们将讨论如何用JavaScript获得HTML5的数据属性。我们将通过几个真实的例子来展示你如何用vanilla JavaScript和jQuery来使用这些数据属性。
JavaScript是网络的核心技术之一。大多数网站都使用它，而且所有的现代网络浏览器都支持它，不需要插件。在这个系列中，我们要讨论的是对你的日常JavaScript开发有帮助的技巧和窍门。
更多的时候，你需要在你的网络应用程序或网站上与不同的HTML元素一起存储一些额外的信息。这对用户来说可能没有任何意义，但如果你想根据这些信息进行操作，就会对你有所帮助。例如，如果你有一个HTML表，上面有来自数据库的行，对于每一行，你可能想存储相应的数据库ID。这将使编辑和其他事务更加容易。这是自定义数据属性的一个伟大用途。在引入这些自定义数据属性之前，开发者通常会使用类属性来存储这些信息，但类属性实际上并不是为了这个目的，这种做法会使理解代码和网站标记更加复杂。
随着HTML5自定义数据属性的引入，在你的HTML中存储和检索自定义数据真的很容易。
使用普通的 JavaScript 访问数据属性
在这一节中，我们将讨论使用vanilla JavaScript来获取HTML5数据属性的不同方法。
HTMLElement.dataset 属性
该属性允许你轻松地访问一个元素的数据属性。 dataset属性允许你轻松访问一个元素的数据属性。
让我们考虑下面的例子。
首先，我们在每个<li> 元素上定义了data-employee-id 自定义数据属性，用来存储员工的 ID。如果需要的话，以后可以用它来获取一个雇员的更多细节。接下来，我们在每个<li> 元素上定义了onclick 事件处理程序，所以当你点击任何一行时，它将调用getEmpId 函数，最终获取与相应<li> 元素相关的employee-id 数据属性的值。
在getEmpId 函数中，我们使用了<li> 元素的dataset 属性，它被作为第一个参数传递。dataset 属性返回一个DOMStringMap 对象，你可以用它来获取单个属性。
当你用dataset 属性获取单个属性时，有几件重要的事情。data- 的前缀会从属性名称中移除。任何小写字母后面的连字符都会被转换为大写字母，连字符也会被删除。换句话说，dash-style 属性名被转换为camelCase 对象键。其他字符将保持不变。在我们的例子中，通过这些规则，data-employee-id 属性被转换为employeeId 。因此，你可以使用element.dataset.employeeId 来获取data-employee-id 属性的值。
所以，这就是dataset 在vanilla JavaScript中的正确工作方式。
getAttribute() 方法
在本节中，我们将讨论如何使用getAttribute 方法来获取数据属性的值。
我们将修改我们在上一节中讨论的例子。
正如你所看到的，用HTML元素的getAttribute 方法来获取自定义数据属性是非常直接的。你只需要传递整个属性名称和data- 前缀，就可以得到一个属性的值。
使用jQuery库访问数据属性
在本节中，我们将讨论如何使用jQuery库来获取HTML5数据属性。
data() 方法
jQuery的data 方法允许你轻松地获取一个元素的数据属性。
让我们通过下面的例子来了解jQuery的数据方法是如何工作的。
正如你所看到的，我们只需要传递数据属性名称的骆驼字母大小写版本来获取它的值。
attr() 方法
在jQuery中，你也可以使用attr 方法来获得一个元素的特定属性的值。
让我们快速看看你如何在jQuery中使用attr 方法。
…
…
var empId = $(element).attr('data-employee-id');
…
…
正如你所看到的，attr 方法与vanilla JavaScript中的getAttribute 方法的工作方式相同。
在jQuery中，data 和attr 方法的区别在于，data 方法在内部将从数据属性中获得的字符串转换为相应的类型，如数字，布尔等。
所以，这就是你如何使用jQuery来轻松获取数据属性的。
总结
今天，我们讨论了如何用JavaScript获取HTML5的数据属性。在几个实际例子的帮助下，你了解了HTML5数据属性如何与vanilla JavaScript和jQuery库一起工作。
