本教程详细介绍了如何使用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代码如下：
// 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方法，核心思想都是遍历、判断和构建，以满足特定的数据组织需求。