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：
Blender Geometry Nodes Script Generator
下载
生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。
-
❌ 报错：
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 等方法。强行调用会报错：
-
❌ 错误：
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
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
