本文介绍如何通过 javascript 高效获取多个具有相同 class 的元素的 data-id 值，并将其统一构建成一个字符串数组，避免常见误区（如误用 array.from 处理字符串）。
在前端开发中，常需从 DOM 中批量读取自定义数据属性（如 data-id）用于后续逻辑处理（例如批量提交、筛选或状态管理）。假设你有一组结构如下、共享同一 class（如 .a）的
元素：
<div data-id="100" class="a"></div> <div data-id="101" class="a"></div> <div data-id="102" class="a"></div>
目标是提取所有 data-id 的值（"100", "101", "102"），合并为一个数组：["100", "101", "102"]。
✅ 推荐方案：使用 document.querySelectorAll() + Array.from() 配合映射函数
querySelectorAll 返回的是一个静态的 NodeList，它不是数组，但可被 Array.from() 正确转换——关键在于传入第二个参数（映射回调），直接从每个元素中提取 dataset.id：
const idArray = Array.from(
document.querySelectorAll('.a'),
element => element.dataset.id
);
console.log(idArray); // ["100", "101", "102"]⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- element.dataset.id 读取的是 data-id 属性值（自动转为小驼峰，data-user-id → dataset.userId）；
- 若某元素缺失 data-id，对应项将为 undefined，建议按需过滤：
const idArray = Array.from( document.querySelectorAll('.a'), el => el.dataset.id ).filter(id => id !== undefined && id !== ''); - 不要误写为 Array.from(element.dataset.id)——这会把单个字符串拆成字符数组（如 "100" → ["1", "0", "0"]），正是提问者遇到的问题。
? 替代写法（ES6+）：也可用扩展运算符 + map()：
const idArray = [...document.querySelectorAll('.a')].map(el => el.dataset.id);总结：核心在于理解 NodeList 可迭代但非数组，应利用 Array.from(iterable, mapFn) 的映射能力一次性完成“选取→提取→聚合”，简洁、高效且语义清晰。
