querySelectorAll 返回静态 NodeList，非 Array，旧浏览器不支持 forEach；推荐用 Array.from 转数组再遍历，确保兼容性与语义清晰。
querySelectorAll 返回的是 NodeList，不是 Array
很多人直接对 document.querySelectorAll 的返回值调用 forEach，结果报错：TypeError: NodeList.forEach is not a function。这是因为老版本浏览器（如 IE）下的 NodeList 不继承自 Array.prototype，且早期规范中它压根没有 forEach 方法——即使现代 Chrome/Firefox 已支持，也不能默认它可用。
现代浏览器中可直接用 forEach，但需确认环境
从 DOM Living Standard 开始，NodeList 确实实现了 forEach，但它属于 NodeList.prototype，不是所有运行时都启用。是否能用取决于：
- 目标浏览器是否为 Chrome 51+ / Firefox 50+ / Safari 10+ / Edge 16+
- 你的构建工具（如 Babel）是否配置了
dompolyfill 或未误删NodeList.prototype.forEach - 使用
use strict时某些旧 polyfill 可能失效
如果确定兼容，写法就是：
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', handler);
});
更稳妥的写法：转成数组再遍历
跨浏览器最稳的方式是显式转为真数组。有三种常用手段，区别在兼容性和语义：
立即学习“前端免费学习笔记（深入）”；
-
Array.from(document.querySelectorAll('input'))—— 推荐，语义清晰，支持映射回调，IE11+ 可用（需 polyfillArray.from） -
[...document.querySelectorAll('div')]—— 简洁，但 IE 完全不支持扩展运算符作用于NodeList -
Array.prototype.slice.call(document.querySelectorAll('p'))—— 兼容性最好（IE6+），但写法略冗长，且在严格模式下可能出问题
例如：
Array.from(document.querySelectorAll('[data-id]')).forEach(el => {
console.log(el.dataset.id);
});
别忘了 querySelectorAll 返回的是静态 NodeList
这点常被忽略：querySelectorAll 返回的是**静态快照**，后续 DOM 变化不会影响该集合。所以你用 forEach 遍历时，不用担心元素中途被移除导致索引错乱——这和 getElementsByClassName 返回的动态 HTMLCollection 完全不同。
但这也意味着：如果你在循环中插入新匹配元素，它们不会出现在当前这个 NodeList 里，也不会被本轮 forEach 处理到。
真正容易翻车的地方，往往不是语法，而是误以为 NodeList 是活的、可响应的集合。
