如何使用 HTML 元素的 data-id 属性批量提取并构建数组

本文介绍如何通过 javascript 高效提取多个具有相同 class 的 dom 元素所携带的 `data-id` 值，并统一构造成一个字符串数组，适用于动态数据采集与前端批量操作场景。

在实际开发中，我们常将结构化数据（如后端返回的 dataset ID）通过 HTML5 的 data-* 属性绑定到 DOM 元素上，例如

。当页面中存在多个同类元素（如一组卡片、列表项或图片容器），且每个都携带唯一 data-id 时，我们需要将其集中提取为一个数组，以便后续进行 AJAX 批量请求、状态管理或筛选逻辑。

推荐使用 document.querySelectorAll() 配合 Array.from() 的映射能力一次性完成选择与转换：

const idArray = Array.from(
  document.querySelectorAll('.a'),
  element => element.dataset.id
);
console.log(idArray); // ["100", "101", "102"]

✅ 优势说明：

• querySelectorAll('.a') 返回的是 NodeList（类数组对象），不是字符串，因此不会出现 Array.from('100') → ['1','0','0'] 的误用问题；
• Array.from(iterable, mapFn) 的第二个参数是映射函数，可直接对每个匹配元素执行 dataset.id 提取，避免手动 for 循环 + push()；
• 代码简洁、语义清晰、兼容性好（支持 IE9+，现代项目中基本无兼容顾虑）。

⚠️ 注意事项：

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

• 确保 DOM 已加载完成（建议在 DOMContentLoaded 事件后执行，或置于 底部）；
• dataset.id 返回的是字符串类型，如需数值数组，可改用 Number(element.dataset.id) 或 +element.dataset.id；
• 若某些元素未设置 data-id，其对应值为 undefined，必要时可添加过滤：

  const idArray = Array.from(
    document.querySelectorAll('.a'),
    el => el.dataset.id
  ).filter(id => id != null && id !== '');

该方法兼顾性能与可读性，是现代前端批量读取自定义数据属性的标准实践。