querySelectorAll 返回静态 NodeList，需转为数组才能使用 map/filter 等方法；推荐 Array.from()，其次展开运算符[...]，传统 slice.call 兼容性好但不推荐；NodeList 自带 forEach 但缺少其他数组方法。

querySelectorAll 返回的是 静态 NodeList，不是数组，所以不能直接用 map、filter、forEach 等数组方法。要转成真实数组，有几种常用且可靠的方式。

用 Array.from() 转换（推荐）

这是最清晰、语义最明确的方法，兼容性好（支持 ES6+ 环境，包括现代浏览器和 Node.js 中的 JSDOM）：

• const elements = Array.from(document.querySelectorAll('.item'));
• 之后就能放心调用 elements.map(...)、elements.filter(...) 等
• 还能顺便做映射处理，比如：Array.from(document.querySelectorAll('input'), el => el.value)

用展开运算符 [...]

写法更简洁，效果等同于 Array.from，但要求运行环境支持 ES2015+：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• const elements = [...document.querySelectorAll('.btn')];
• 适合快速写脚本或现代项目中使用
• 注意：IE 不支持，如果需兼容旧版浏览器请避开

用 Array.prototype.slice.call()

传统写法，兼容性最好（连 IE8 都支持），但现在已不推荐作为首选：

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

• const elements = Array.prototype.slice.call(document.querySelectorAll('li'));
• 本质是借用数组的 slice 方法去“偷” NodeList 的类数组结构
• 可简写为 [].slice.call(...)，但可读性稍差

为什么不直接用 forEach？

NodeList 确实有 forEach 方法（现代浏览器中），但它只是“长得像数组”，仍缺少 map、find、reduce 等关键方法。依赖它会限制后续操作，也容易在类型判断或工具链中出问题（比如 TypeScript 类型推导、Lodash 工具函数不识别 NodeList）。