本教程将指导您如何使用javascript从一组html元素中提取数据，并根据指定的`data-*`属性（例如`data-tab`）将这些元素动态地分组到唯一的数组或对象集合中。通过遍历dom元素并利用javascript对象的键值对特性，我们将实现高效的数据分类和结构化，适用于管理大量具有相似结构但需按特定属性区分的数据。

在前端开发中，我们经常需要从html页面中收集数据，特别是当这些数据以自定义属性（data-*属性）的形式嵌入到DOM元素中时。一个常见的需求是，根据某个特定的data-*属性值，将这些元素的数据进行分类和分组，形成一个结构化的javaScript对象或数组集合。例如，您可能有一系列隐藏的<input>元素，每个元素都包含产品的尺寸、颜色和所属类别信息，而您希望将这些产品按照其类别（data-tab）进行分组。

考虑以下HTML结构，其中包含多个具有data-size、data-color和data-tab属性的<input>元素：

<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"> <!-- 还有更多类似的元素，例如50个或更多 -->

我们的目标是根据data-tab属性的值，将这些<input>元素的数据分别收集到不同的数组中，最终形成一个javascript对象，其键为唯一的data-tab值，值为包含相应元素数据的数组。

核心实现思路

实现这一目标的关键步骤如下：

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

1. 获取所有目标元素： 使用document.querySelectorAll方法选中所有需要处理的html元素。
2. 初始化结果容器： 创建一个空的JavaScript对象，用于存储最终分组后的数据。这个对象将以data-tab的值作为键，以包含该类别所有元素的数组作为值。
3. 遍历元素并分组：
   • 对获取到的每个HTML元素进行迭代。
   • 提取当前元素的data-tab属性值。
   • 检查结果对象中是否已经存在以该data-tab值为键的属性。
   • 如果不存在，则为该键创建一个新的空数组。
   • 从当前元素中提取其他相关的data-*属性（如data-size和data-color），构建成一个子对象。
   • 将这个子对象添加到对应data-tab键下的数组中。

JavaScript代码实现

以下是实现上述逻辑的JavaScript代码：

// 1. 获取所有目标元素 const inputs = document.querySelectorAll('input[data-tab]'); // 明确指定选择带有data-tab属性的input元素 const groupedData = {}; // 2. 初始化结果容器  // 3. 遍历元素并分组 for (let i = 0; i < inputs.Length; i++) {   const currentInput = inputs[i];   const tabValue = currentInput.getAttribute('data-tab');    // 如果groupedData中还没有这个tabValue作为键，则创建一个空数组   if (!groupedData.hasOwnProperty(tabValue)) {     groupedData[tabValue] = [];   }    // 提取当前元素的其他数据属性，构建子对象   const subObject = {     size: currentInput.getAttribute('data-size'),     color: currentInput.getAttribute('data-color'),     tab: tabValue // 也可以将tabValue包含在子对象中   };    // 将子对象推入对应tabValue的数组中   groupedData[tabValue].push(subObject); }  console.log(groupedData);

代码解析：

• const inputs = document.querySelectorAll(‘input[data-tab]’);：这行代码选取了所有带有data-tab属性的<input>元素。这种选择器比简单的’input’更精确，避免了处理不相关的<input>元素。
• const groupedData = {};：声明一个名为groupedData的空对象，用于存储最终分组后的数据。这里使用了const，符合现代JavaScript的推荐实践。
• for (let i = 0; i < inputs.length; i++) { … }：一个标准的for循环，用于遍历inputs nodeList中的每一个元素。
• const tabValue = currentInput.getAttribute(‘data-tab’);：获取当前元素的data-tab属性值。
• if (!groupedData.hasOwnProperty(tabValue)) { … }：hasOwnProperty方法用于检查groupedData对象自身是否包含tabValue这个属性。这比直接检查!groupedData[tabValue]更健壮，因为它不会受到原型链上同名属性的影响。如果不存在，则groupedData[tabValue] = [];会创建一个新的空数组。
• const subObject = { … };：创建一个新的对象subObject，用于存储当前元素的data-size、data-color和data-tab属性值。您可以根据需要提取更多或更少的属性。
• groupedData[tabValue].push(subObject);：将构建好的subObject推入到groupedData对象中对应tabValue键的数组里。

运行结果示例

执行上述JavaScript代码后，console.log(groupedData)的输出将是一个类似以下结构的对象：

{   "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" }   ] }

这个结果对象清晰地展示了数据如何根据data-tab属性进行了分类。

集简云

软件集成平台，快速建立企业自动化与智能化

22

查看详情

注意事项与优化

1. 现代JavaScript实践： 在现代JavaScript中，推荐使用const和let来声明变量，而不是var。const用于声明常量，let用于声明块级作用域变量。

2. 更简洁的语法（可选）： 对于更复杂的场景或偏好函数式编程风格，可以使用Array.prototype.reduce方法来实现相同的功能，代码可能更紧凑：

   const inputs = document.querySelectorAll('input[data-tab]'); const groupedData = Array.from(inputs).reduce((acc, currentInput) => {   const tabValue = currentInput.getAttribute('data-tab');   const subObject = {     size: currentInput.getAttribute('data-size'),     color: currentInput.getAttribute('data-color'),     tab: tabValue   };   // 使用逻辑或运算符来初始化数组，如果acc[tabValue]不存在   (acc[tabValue] = acc[tabValue] || []).push(subObject);   return acc; }, {}); // 初始值为一个空对象  console.log(groupedData);

   这种方式避免了显式的if条件检查，利用了||运算符的短路特性。

3. *动态提取所有`data-属性：** 如果您希望动态地提取元素上的所有data-*属性，而不仅仅是硬编码size和color，可以使用dataset`属性：

   const inputs = document.querySelectorAll('input[data-tab]'); const groupedData = {};  for (const currentInput of inputs) { // 使用for...of循环更简洁   const tabValue = currentInput.dataset.tab; // 使用dataset属性获取data-tab    if (!groupedData.hasOwnProperty(tabValue)) {     groupedData[tabValue] = [];   }    // currentInput.dataset 返回一个DOMStringMap对象，包含所有data-*属性   const subObject = { ...currentInput.dataset }; // 复制所有data-*属性    groupedData[tabValue].push(subObject); }  console.log(groupedData);

   element.dataset属性提供了一个方便的方式来访问元素的data-*属性。它返回一个DOMStringMap对象，其中每个data-name属性都映射到dataset.name。

4. 错误处理和健壮性： 在实际应用中，您可能需要考虑getAttribute返回NULL（即属性不存在）的情况，或者data-tab属性值为空字符串的情况。根据具体需求进行适当的校验和处理。

5. 性能考量： 对于页面上存在数千个甚至更多此类元素的情况，直接操作DOM并循环可能会有性能开销。在这种极端情况下，可以考虑使用虚拟DOM库、Web Workers或更优化的选择器/遍历策略。但对于数百个元素，上述方法通常是高效且足够的。

总结

通过本教程，您已经掌握了如何使用JavaScript从HTML元素中提取数据，并根据特定data-*属性进行动态分组的方法。无论是使用传统的for循环还是现代的Array.prototype.reduce，核心思想都是遍历元素、提取关键属性作为分组依据，并将相关数据组织到结构化的JavaScript对象中。这种技术在数据展示、过滤、排序以及与后端数据交互等多种场景下都非常实用，能够帮助您更有效地管理和操作前端数据。