本文介绍如何通过 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 !== '');
该方法兼顾性能与可读性，是现代前端批量读取自定义数据属性的标准实践。
