在本文中，我们将讨论如何使用 JavaScript 获取 HTML5 数据属性。我们将通过几个实际示例来演示如何通过普通 JavaScript 和 jQuery 使用这些数据属性。
JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论有助于您进行日常 JavaScript 开发的提示和技巧。
通常，您需要在 Web 应用程序或网站上存储一些额外信息以及不同的 HTML 元素。它可能对用户没有任何意义，但如果您希望根据该信息执行操作，它可能会对您有所帮助。
例如，如果您有一个 HTML 表，其中包含数据库中的行，那么您可能希望为每一行存储相应的数据库 ID。这将使编辑和其他事务变得更加容易。这是自定义数据属性的一个很好的用途。
立即学习“Java免费学习笔记（深入）”；
在引入这些自定义数据属性之前，开发人员通常会使用类属性来存储此类信息，但类属性实际上并不是用于此目的，这种做法可能会使理解代码和站点标记。
随着 HTML5 自定义数据属性的引入，在 HTML 中存储和检索自定义数据变得非常容易。
使用 Vanilla JavaScript 访问数据属性
在本节中，我们将讨论使用普通 JavaScript 获取 HTML5 数据属性的不同方法。
HTMLElement.dataset 属性
dataset 属性允许您轻松访问元素的数据属性。
让我们考虑以下示例。
首先，我们在每个 <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> 元素关联的数据属性。
在 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 方法的工作方式与普通 JavaScript 中的 getAttribute 方法相同。
在 jQuery 中，data 和 attr 方法的区别在于 data 方法内部将从 data 属性获取的字符串转换为相应的类型，如数字、布尔值等。
这就是如何使用 jQuery 轻松获取数据属性。
结论
今天，我们讨论了如何使用 JavaScript 获取 HTML5 数据属性。在几个实际示例的帮助下，您了解了 HTML5 数据属性如何与普通 JavaScript 和 jQuery 库配合使用。
