J*aScript：从HTML数据属性创建分组对象与数组

---

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

引言

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

场景与需求

假设我们有一组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"的元素数据归入另一个数组。

实现方法

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

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

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

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

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

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

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

var object = {};

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

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

1. 获取其data-tab属性的值。
2. 检查object中是否已经有以该data-tab值为键的属性。如果没有，说明这是一个新的分组，我们为其创建一个空数组。
3. 从当前input元素中提取data-size、data-color和data-tab属性，构建一个subObject。
4. 将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);
}

完整代码示例

结合上述步骤，完整的J*aScript代码如下：

// 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结构示例（用于测试）

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

LALAL.AI

AI人声去除器和声乐提取工具

196 查看详情

<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)将输出一个J*aScript对象，其结构大致如下：

{
  "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值的元素的详细数据对象。

注意事项与扩展

1. 性能考量： 对于页面上数量极大的元素（数千或更多），document.querySelectorAll和随后的循环可能会有轻微的性能开销。但在大多数Web应用场景中，这种方法是完全可接受且高效的。

2. 错误处理： 如果某些元素可能缺少data-tab属性，inputs[i].getAttribute('data-tab')将返回null。您可能需要添加额外的检查来处理这种情况，例如将其归类到“未分类”组，或者直接跳过。

3. 动态属性： 如果需要提取的data-*属性是动态的，可以通过遍历element.dataset对象来实现，例如Object.keys(inputs[i].dataset).forEach(...)。

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

   // 使用Array.from和reduce的现代J*aScript写法
   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);

总结

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

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

# 如何使用  # 轻奢品牌营销软文推广  # seo行业没用  # 企业网站建设方案对比  # 沧州百度推广网站招聘  # 宝鸡网站建设建站  # 推广投放广告导航网站的目的  # seo外包工具  # 发帖属于seo推广吗  # 网站优化简历校园图片  # 鲜果网络营销推广方案  # 进行分类  # 输入框  # 值为  # javascript  # 可以直接  # 构建一个  # 创建一个  # 自定义  # 组中  # 遍历  # red  # html元素  # 前端开发  # 前端  # html  # java  # es6 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 《撕歌》会员开通方法  《糖豆》添加舞曲方法  AngularJS动态内容中DOM元素查找的时序问题及$timeout解决方案  Apple Music无故扣费引质疑  163邮箱登录入口官网 163.com邮箱登录入口  苹果iPhone14ProMax如何新建AppleID_iPhone14ProMax新建AppleID具体流程  如何在解析前预检查XML文件的完整性？ 比如检查文件大小或特定结束标签  精通VS Code多光标编辑以实现闪电般快速的修改  《绿竹漫游》关闭消息通知方法  mysql归档数据怎么导出为csv_mysql归档数据导出为csv文件的方法  快递查询，一键速查  如何使用 composer 和 aop-php 实现 AOP 编程？  斯宾塞称XGP云游戏“蒸蒸日上”：正在构建一个游戏从未如此唾手可得的未来  windows10怎么开启wsl_windows10安装linux子系统教程  汽水音乐网页端访问 汽水音乐官方网页直达  苹果手机缓存怎么清除_苹果手机缓存如何清除iphone各版本操作步骤  申通快件单号查询平台 申通包裹物流动态跟踪  Win11如何分屏操作_Win11多窗口分屏技巧  在XML中嵌入二进制数据（如图片）的最佳实践是什么？ Base64编码与解析注意事项  J*aScript文本高亮功能优化：解决多词匹配错误与精确分割策略  j*a中ArrayBlockingQueue的使用  《真我》申请退款方法  在J*a中如何实现类的继承与方法重用_OOP继承方法重用技巧分享  B站怎么快速升级 B站用户等级提升攻略【详解】  中通快递官网指定查询 中通快递单号查询平台入口  学习通网页版个人登录_学习通网页版个人账户登录入口  追剧达人如何发弹幕  哔哩哔哩的|直播|间怎么送礼物_哔哩哔哩|直播|送礼操作指南  QQ邮箱注册地址 免费获取QQ邮箱账号  苹果电脑如何快速查看电池状态 苹果电脑电池信息快捷方法  rabbitmq 持久化有什么缺点？  汽水音乐网页版登录 汽水音乐网页端官方入口  Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理  ExcelSCAN与LAMBDA如何创建自定义移动平均函数_SCAN实现任意窗口期移动平均计算  从HTML表单获取逗号分隔值并转换为NumPy数组进行预测  鲨鱼剧场app金币获取方法  虫虫漫画排行榜单入口_虫虫漫画编辑推荐入口  高效调试PHP大型嵌套数组：JSON序列化与可视化工具实践  邮编号码查询app有哪些_邮编号码查询推荐app及使用体验  小米civi如何设置锁屏时间  《百度畅听版》关闭兴趣推荐方法  Highcharts雷达图轴线交点数值标注指南  iCloud官方网站 iCloud网页版在线登录入口  windows10怎么开启卓越性能_windows10电源选项代码激活  《土豆雅思》修改密码方法  铁路12306官网登录入口 铁路12306在线购票官方平台  CodeIgniter 3 中基于 MySQL 数据高效生成动态图表教程  为什么XML解析器对大小写敏感？ 理解XML规范中的大小写规则与最佳实践  c++20的指定初始化(Designated Initializers)怎么用_c++ C风格结构体初始化  百度地图离线地图无法加载如何解决 百度地图离线地图加载优化方法 

 2025-11-09