JavaScript：从HTML数据属性创建分组对象与数组-html教程-PHP中文网

JavaScript：从HTML数据属性创建分组对象与数组

碧海醫心

发布： 2025-11-09 12:59:01

原创

242人浏览过

JavaScript：从HTML数据属性创建分组对象与数组

本教程详细介绍了如何使用javascript从html元素的自定义数据属性（`data-*`）中提取信息，并根据指定的数据属性（如`data-tab`）的值，动态地将这些数据组织成一个包含多个唯一数组或对象的结构。通过遍历dom元素并构建一个javascript对象，您可以高效地对页面上的大量数据进行分类和管理。

引言

在前端开发中，我们经常需要从HTML页面中获取数据并进行处理。当页面中存在大量具有相似结构但内容不同的元素时，例如一系列带有自定义data-*属性的input标签，如何高效地提取、分类和组织这些数据成为一个常见需求。本教程将指导您如何利用JavaScript，根据某个特定的data-*属性值，将这些元素的数据动态地分组到不同的数组中，最终形成一个结构化的JavaScript对象。

场景与需求

假设我们有一组HTML input 元素，它们都带有data-size、data-color和data-tab等自定义数据属性。例如：

<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">
<!-- 还有更多类似的输入框... -->

登录后复制

我们的目标是根据data-tab属性的值，将这些输入框的数据进行分类，并组织成一个以data-tab值为键，以包含详细数据对象数组为值的结构。例如，所有data-tab="Gardenbox Professional"的元素数据应归入一个数组，所有data-tab="Gardenbox ECO"的元素数据归入另一个数组。

实现方法

实现这一目标的核心思路是：

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

选取所有目标HTML元素。
初始化一个空的JavaScript对象，用于存储最终分组的数据。
遍历每个选中的HTML元素。
在遍历过程中，提取元素的data-tab属性值作为分组的依据。
检查分组对象中是否已存在该data-tab值对应的键。如果不存在，则创建一个新的空数组。
提取当前元素的所有相关data-*属性，构建成一个子对象。
将这个子对象添加到对应data-tab键的数组中。

步骤一：获取所有目标元素

首先，我们需要使用document.querySelectorAll()方法来选取页面上所有符合条件的input元素。

var inputs = document.querySelectorAll('input');

登录后复制

步骤二：初始化数据存储结构

创建一个空对象object，它将作为我们最终存储分组数据的容器。

var object = {};

登录后复制

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

接下来，我们遍历inputs集合。对于每个input元素，我们执行以下操作：

获取其data-tab属性的值。
检查object中是否已经有以该data-tab值为键的属性。如果没有，说明这是一个新的分组，我们为其创建一个空数组。
从当前input元素中提取data-size、data-color和data-tab属性，构建一个subObject。
将subObject添加到object中对应data-tab键的数组中。

for (var i = 0; i < inputs.length; i++) {
  // 获取当前元素的data-tab属性值
  var dataTabValue = inputs[i].getAttribute('data-tab');

  // 如果object中还没有这个data-tab作为键，则初始化一个空数组
  if (!object.hasOwnProperty(dataTabValue)) {
    object[dataTabValue] = [];
  }

  // 构建一个包含当前元素所有相关数据属性的子对象
  var subObject = {};
  subObject["size"] = inputs[i].getAttribute('data-size');
  subObject["color"] = inputs[i].getAttribute('data-color');
  subObject["tab"] = dataTabValue; // 可以直接使用已获取的dataTabValue

  // 将子对象添加到对应data-tab键的数组中
  object[dataTabValue].push(subObject);
}

登录后复制

完整代码示例

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

即构数智人

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

查看详情

// 1. 获取所有input元素
var inputs = document.querySelectorAll('input');    

// 2. 初始化一个空对象来存储分组数据
var object = {};

// 3. 遍历每个input元素并进行分组
for (var i = 0; i < inputs.length; i++) {
  var dataTabValue = inputs[i].getAttribute('data-tab');

  // 如果分组对象中没有当前data-tab的键，则创建一个空数组
  if (!object.hasOwnProperty(dataTabValue)) {
    object[dataTabValue] = [];
  }

  // 提取当前元素的其他数据属性，构建一个子对象
  var subObject = {};
  subObject["size"] = inputs[i].getAttribute('data-size');
  subObject["color"] = inputs[i].getAttribute('data-color');
  subObject["tab"] = dataTabValue; // 存储data-tab属性本身

  // 将子对象添加到对应data-tab的数组中
  object[dataTabValue].push(subObject); 
}

// 打印结果，查看分组后的数据结构
console.log(object);

登录后复制

HTML结构示例（用于测试）

为了使上述JavaScript代码能够运行，您的HTML页面中需要包含以下或类似的结构：

<input hidden data-key="item1" data-size="120x40" data-color="Brown" data-tab="Gardenbox Professional">
<input hidden data-key="item2" data-size="160x40" data-color="Brown" data-tab="Gardenbox ECO">
<input hidden data-key="item3" data-size="120x40" data-color="Red" data-tab="Gardenbox Professional">
<input hidden data-key="item4" data-size="160x40" data-color="Red" data-tab="Gardenbox ECO">
<input hidden data-key="item5" data-size="100x30" data-color="Green" data-tab="Gardenbox Professional">

登录后复制

结果解读

执行上述代码后，console.log(object)将输出一个JavaScript对象，其结构大致如下：

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

登录后复制

这个对象以data-tab的唯一值作为键，每个键对应一个数组，数组中包含了所有具有该data-tab值的元素的详细数据对象。

注意事项与扩展

性能考量： 对于页面上数量极大的元素（数千或更多），document.querySelectorAll和随后的循环可能会有轻微的性能开销。但在大多数Web应用场景中，这种方法是完全可接受且高效的。
错误处理： 如果某些元素可能缺少data-tab属性，inputs[i].getAttribute('data-tab')将返回null。您可能需要添加额外的检查来处理这种情况，例如将其归类到“未分类”组，或者直接跳过。
动态属性： 如果需要提取的data-*属性是动态的，可以通过遍历element.dataset对象来实现，例如Object.keys(inputs[i].dataset).forEach(...)。

现代JavaScript： 对于支持ES6及更高版本的环境，可以使用更简洁的语法，例如Array.from(inputs).reduce()结合Map对象来达到相同的效果，代码会更加函数式和声明式。

// 使用Array.from和reduce的现代JavaScript写法
const groupedData = Array.from(document.querySelectorAll('input')).reduce((acc, input) => {
    const dataTabValue = input.dataset.tab; // dataset属性可以直接访问data-*
    if (!acc[dataTabValue]) {
        acc[dataTabValue] = [];
    }
    acc[dataTabValue].push({
        size: input.dataset.size,
        color: input.dataset.color,
        tab: dataTabValue
    });
    return acc;
}, {});
console.log(groupedData);

登录后复制

总结

通过本教程，您学会了如何使用原生JavaScript从HTML元素的自定义数据属性中提取信息，并根据特定的属性值进行高效分组。这种技术在处理大量结构化数据时非常有用，能够帮助您将扁平化的DOM数据转化为易于操作和管理的对象结构，为后续的数据展示、筛选或进一步处理奠定基础。无论是使用传统的for循环还是现代的reduce方法，核心思想都是遍历、判断和构建，以满足特定的数据组织需求。

以上就是JavaScript：从HTML数据属性创建分组对象与数组的详细内容，更多请关注php中文网其它相关文章！