JavaScript教程：根据HTML data-* 属性构建唯一数据集合-html教程-PHP中文网

JavaScript教程：根据HTML data-* 属性构建唯一数据集合

碧海醫心

发布： 2025-11-13 15:44:29

原创

420人浏览过

JavaScript教程：根据HTML data-* 属性构建唯一数据集合

本教程将指导您如何利用javascript从html元素中提取自定义数据属性，并根据特定属性（如`data-tab`）将这些数据动态分组到结构化的javascript对象中。通过遍历dom元素并智能地组织数据，您可以高效地将前端标记转换为可操作的数据集合，适用于各种数据处理和展示场景。

引言

在前端开发中，我们经常需要从HTML元素中提取数据并进行处理。自定义数据属性（data-* 属性）提供了一种将额外数据附加到HTML元素上的标准方式。当页面中存在大量具有相似结构但特定属性值不同的元素时，如何高效地将这些元素的数据按照某个特定属性进行分类和组织，就成为了一个常见的需求。本教程将详细讲解如何使用JavaScript实现这一目标，将散布在DOM中的数据转换为结构化的JavaScript对象。

场景描述与目标

假设您有一系列隐藏的 <input> 元素，每个元素都包含多个自定义数据属性，例如 data-size、data-color 和 data-tab。这些元素可能代表不同的产品配置或选项。

示例 HTML 结构：

<input hidden data-size="120x40" data-color="Brown" data-tab="Gardenbox Professional">
<input hidden data-size="160x40" data-color="Brown" data-tab="Gardenbox ECO">
<input hidden data-size="120x40" data-color="Red" data-tab="Gardenbox Professional">
<input hidden data-size="160x40" data-color="Red" data-tab="Gardenbox ECO">
<!-- 更多类似的 input 元素，可能有50个或更多 -->

登录后复制

我们的目标是：根据 data-tab 属性的值，将所有相关的 input 元素数据分组到一个JavaScript对象中。最终的结果应该是一个对象，其键是唯一的 data-tab 值，每个键对应的值是一个数组，数组中包含所有属于该 data-tab 的元素的数据对象。

立即学习“Java免费学习笔记（深入）”；

例如，对于上述HTML，我们期望得到类似以下结构的数据：

{
  "Gardenbox Professional": [
    { size: "120x40", color: "Brown", tab: "Gardenbox Professional" },
    { size: "120x40", color: "Red", tab: "Gardenbox Professional" }
  ],
  "Gardenbox ECO": [
    { size: "160x40", color: "Brown", tab: "Gardenbox ECO" },
    { size: "160x40", color: "Red", tab: "Gardenbox ECO" }
  ]
}

登录后复制

JavaScript 实现步骤

我们将通过以下步骤实现数据分组：

步骤一：选择所有相关元素

首先，我们需要获取页面上所有具有目标数据属性的 <input> 元素。document.querySelectorAll() 方法是实现这一目标的最佳选择。为了提高效率和准确性，我们可以直接选择那些带有 data-tab 属性的 input 元素。

const inputs = document.querySelectorAll('input[data-tab]');

登录后复制

步骤二：初始化数据容器

我们需要一个空的JavaScript对象来存储最终的分组数据。这个对象将以 data-tab 的值作为键。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

const groupedData = {};

登录后复制

步骤三：遍历元素并分组数据

接下来，我们将遍历所有选中的 input 元素。对于每个元素，我们将提取其 data-tab、data-size 和 data-color 属性，并将其组织成一个子对象，然后根据 data-tab 的值将其添加到 groupedData 对象中对应的数组里。

我们将使用 forEach 循环和 dataset 属性来简化代码。Element.dataset 属性提供了一种方便的方式来访问元素的 data-* 属性。例如，input.dataset.tab 等同于 input.getAttribute('data-tab')。

inputs.forEach(input => {
  const tabValue = input.dataset.tab; // 获取 data-tab 的值

  // 如果 groupedData 中还没有这个 tabValue 对应的数组，则创建一个空数组
  if (!groupedData.hasOwnProperty(tabValue)) {
    groupedData[tabValue] = [];
  }

  // 构建当前 input 元素的数据对象
  const itemData = {
    size: input.dataset.size,
    color: input.dataset.color,
    tab: tabValue // 避免重复获取
  };

  // 将数据对象添加到对应的 tabValue 数组中
  groupedData[tabValue].push(itemData);
});

登录后复制

完整示例代码

结合上述步骤，完整的JavaScript代码如下：

// 1. 选择所有带有 data-tab 属性的 input 元素
const inputs = document.querySelectorAll('input[data-tab]');    

// 2. 初始化一个空对象来存储分组后的数据
const groupedData = {};

// 3. 遍历每个 input 元素并进行数据分组
inputs.forEach(input => {
  // 获取当前 input 元素的 data-tab 属性值
  const tabValue = input.dataset.tab; // 使用 dataset 属性访问 data-* 数据

  // 如果 groupedData 中尚未创建此 tabValue 对应的数组，则创建一个
  if (!groupedData.hasOwnProperty(tabValue)) {
    groupedData[tabValue] = [];
  }

  // 构建包含 size, color, tab 信息的子对象
  const itemData = {
    size: input.dataset.size,  // 访问 data-size
    color: input.dataset.color, // 访问 data-color
    tab: tabValue               // 使用已获取的 tabValue
  };

  // 将构建好的子对象添加到对应 tabValue 的数组中
  groupedData[tabValue].push(itemData); 
});

// 在控制台输出最终分组后的数据对象
console.log(groupedData);

登录后复制

结果输出与结构

执行上述JavaScript代码后，console.log(groupedData) 将会输出一个结构化的JavaScript对象，其键是每个唯一的 data-tab 值，每个键对应的值是一个数组，数组中包含了所有该 data-tab 下的 input 元素所提取的 size、color 和 tab 数据。

例如，对于以下HTML：

<input hidden data-size="120x40" data-color="Brown" data-tab="Gardenbox Professional">
<input hidden data-size="160x40" data-color="Brown" data-tab="Gardenbox ECO">
<input hidden data-size="120x40" data-color="Red" data-tab="Gardenbox Professional">
<input hidden data-size="160x40" data-color="Red" data-tab="Gardenbox ECO">

登录后复制

输出将是：

{
  "Gardenbox Professional": [
    { "size": "120x40", "color": "Brown", "tab": "Gardenbox Professional" },
    { "size": "120x40", "color": "Red", "tab": "Gardenbox Professional" }
  ],
  "Gardenbox ECO": [
    { "size": "160x40", "color": "Brown", "tab": "Gardenbox ECO" },
    { "size": "160x40", "color": "Red", "tab": "Gardenbox ECO" }
  ]
}

登录后复制

注意事项与优化

使用 dataset 属性：推荐使用 element.dataset.attributeName 来访问 data-attribute-name 属性，它比 element.getAttribute('data-attribute-name') 更简洁、更符合现代JavaScript习惯。
选择器优化：在 querySelectorAll 中加入属性选择器 [data-tab] 可以确保只选择那些确实包含 data-tab 属性的 input 元素，从而减少不必要的遍历和处理。
变量声明：使用 const 和 let 替代 var，以遵循现代JavaScript的最佳实践，提高代码可读性和避免潜在的变量作用域问题。
错误处理：如果某些 input 元素可能缺少 data-size 或 data-color 属性，input.dataset.size 将返回 undefined。在实际应用中，您可能需要添加额外的检查来处理这些缺失值，例如提供默认值或跳过这些属性。
性能考虑：对于页面上数量极其庞大的元素（例如数千个），DOM操作和循环可能会影响性能。在这种极端情况下，可能需要考虑更高级的优化策略，例如使用 Web Workers 或在服务器端预处理数据。然而，对于数百个元素的场景，上述方法通常足够高效。
替代方法（reduce）：对于更函数式编程风格的开发者，也可以使用 Array.prototype.reduce 方法来实现类似的分组逻辑，代码可能更紧凑，但对于初学者而言，forEach 循环可能更易理解。

总结

本教程详细介绍了如何使用JavaScript从HTML元素的自定义数据属性中提取信息，并根据特定的属性值进行高效分组。通过 document.querySelectorAll() 选取元素，利用 element.dataset 属性便捷地访问数据，并通过一个简单的循环逻辑构建一个结构化的JavaScript对象，我们能够将分散的DOM数据转化为易于处理和进一步操作的数据集合。掌握这一技巧，将大大提升您在前端数据处理方面的能力。

以上就是JavaScript教程：根据HTML data-* 属性构建唯一数据集合的详细内容，更多请关注php中文网其它相关文章！