NodeList支持forEach和for...of，HTMLCollection不支持forEach、仅现代浏览器支持for...of，二者均需传统for循环确保兼容性。
NodeList 和 HTMLCollection 都是 DOM 中常见的类数组集合，但它们的迭代行为、可变性与兼容性存在关键差异，直接影响 for...of、forEach 和传统 for 循环的使用效果。
NodeList 是“准数组”，支持 forEach 和 for...of
现代 NodeList（如 querySelectorAll() 返回的）是 可迭代对象（iterable），原生支持 for...of 和 forEach 方法。它不继承自 Array，但拥有自己的 forEach 实现（不是 Array.prototype.forEach），因此无需转成数组即可遍历：
-
✅ 正确用法：
document.querySelectorAll('div').forEach(el => el.classList.add('active')) -
✅ 同样有效：
for (const el of document.querySelectorAll('div')) { ... } - ⚠️ 注意： 早期 IE 不支持 NodeList.forEach，需 polyfill 或改用传统 for 循环
HTMLCollection 是“活集合”，不支持 forEach，但可 for...of（仅现代环境）
HTMLCollection（如 getElementsByTagName()、children 属性返回的）是实时、只读、非可迭代的类数组对象。它没有 forEach 方法，且在旧版浏览器中也不支持 for...of：
用于自动切换项目中适合的node 版本
下载
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
-
❌ 报错：
document.getElementsByTagName('div').forEach(...)（TypeError） -
✅ 可行（现代浏览器）：
for (const el of document.children) { ... }（因 DOM 规范已为 HTMLCollection 添加了 Symbol.iterator） -
✅ 最兼容写法： 用传统 for 循环：
const coll = document.children; for (let i = 0; i
两者都不直接继承 Array，map/filter 等方法不可用
尽管 NodeList（尤其是静态的）常被误认为“像数组”，但它没有 map、filter、find 等方法。强行调用会报错：
立即学习“Java免费学习笔记（深入）”；
-
❌ 错误：
document.querySelectorAll('input').map(...) -
✅ 解决方案： 转为真数组再操作：
[...document.querySelectorAll('input')].map(...)或Array.from(document.querySelectorAll('input')).filter(...) - ? 提示： 扩展运算符和 Array.from 对 HTMLCollection 同样有效，但注意其“实时性”——若在转换后 DOM 发生变化，原 collection 仍会变，而新数组不会
动态 vs 静态：影响迭代时的数据一致性
HTMLCollection 总是动态的（live），NodeList 则分两种：
- 动态 NodeList： 如 document.childNodes，DOM 变化会实时反映在集合中
- 静态 NodeList： 如 querySelectorAll() 返回的，创建后快照固定，后续 DOM 变更不影响它
- ⚠️ 迭代中修改 DOM 的风险： 对动态集合（HTMLCollection 或 live NodeList）使用 for...of 或 for 循环时，若在循环内增删匹配元素，可能跳过或重复处理项（尤其用 for (let i = 0; i
