dom集合（nodelist/htmlcollection）非数组，需转换后才能用map/filter等方法；推荐array.from()，其次扩展运算符，兼容旧环境可用slice.call()。
DOM 集合（如 NodeList 或 HTMLCollection）不是真正的数组，不能直接调用 map、filter、forEach 等数组方法。要使用这些方法，必须先转成标准数组（Array 实例）。
用 Array.from() 转换最推荐
Array.from() 是最简洁、语义最清晰的方式，兼容性好（IE 不支持，但现代项目基本无需考虑），能处理类数组对象和可迭代对象（包括 NodeList 和 HTMLCollection）：
-
✅ 推荐写法：
const divs = Array.from(document.querySelectorAll('div')); -
✅ 也支持带映射逻辑：
const texts = Array.from(document.querySelectorAll('p'), el => el.textContent); -
⚠ 注意：
HTMLCollection（如document.getElementsByTagName('div')）也能转，但部分老版本 Safari 对动态集合支持略弱，建议优先用querySelectorAll返回的静态 NodeList。
用扩展运算符 [... ] 更简洁（ES6+）
如果环境支持 ES6+（绝大多数现代浏览器和 Node.js），扩展运算符是最简写法：
const buttons = [...document.querySelectorAll('button')];const inputs = [...document.forms[0].elements]; // 转表单元素集合-
⚠ 注意：不支持 IE，且对某些“伪数组”（如函数的
arguments在严格模式下）需确保其有Symbol.iterator；DOM 集合普遍支持，放心用。
用 Array.prototype.slice.call() 兼容老环境
在需要支持 IE8–9 的极少数场景中，可用传统方式：
const lis = Array.prototype.slice.call(document.getElementsByTagName('li'));- 也可简写为：
[].slice.call(...)，但语义稍弱，且创建了空数组实例，略低效。 -
⚠ 注意：仅适用于有
length属性和数字索引的类数组对象；对某些 DOM 集合（如document.childNodes在 IE 中）可能不稳定，慎用于动态集合。
为什么不能直接用 Array 方法？
因为 NodeList 和 HTMLCollection 是宿主对象，虽有 length 和索引访问（list[0]），但没有继承 Array.prototype 上的方法。强行调用会报错：
-
document.querySelectorAll('div').map(...)→TypeError: not a function -
document.forms.item(0).elements.forEach(...)→ 同样报错（HTMLCollection无forEach）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
