NodeList和HTMLCollection均非数组，但HTMLCollection始终实时，NodeList依获取方式分静态（querySelectorAll）或动态（childNodes）；二者均不可直接调用forEach等数组方法，且HTMLCollection支持name/id字符串索引而NodeList仅支持数字索引。
NodeList 和 HTMLCollection 都不是数组，但行为不同
它们看起来像数组（有 length、能用索引取值），但都不能直接调用 map、forEach（除非是静态 NodeList）——这是最常踩的坑。区别核心在于：HTMLCollection 始终是「实时」的，而 NodeList 有可能是「静态」的，取决于获取方式。
getElementsByXXX 返回 HTMLCollection，querySelectorAll 返回 NodeList
这是实际编码中最关键的区分点。实时性直接影响后续 DOM 变更是否反映在集合中：
-
document.getElementsByTagName('div')→ 返回HTMLCollection，后续新增会立刻出现在该集合里document.querySelectorAll('div')→ 返回「静态」NodeList，只包含调用时已存在的节点，后续插入不更新node.childNodes→ 返回「动态」NodeList（注意：这个是实时的，和querySelectorAll不同）遍历它们前，先确认是否需要转成真数组
多数时候你想用
forEach或链式方法，就得转换。但别无脑用Array.from—— 性能敏感场景下，简单for循环更稳妥：const divs = document.querySelectorAll('div'); // ✅ 安全通用（兼容旧浏览器） for (let i = 0; i < divs.length; i++) { divs[i].classList.add('processed'); } // ✅ 现代写法（需确保环境支持） divs.forEach(el => el.classList.add('processed')); // ⚠️ 注意：HTMLCollection 不支持 forEach（原生不带），必须先转 Array.from(document.getElementsByTagName('div')).forEach(...);HTMLCollection 支持按 name/id 索引，NodeList 不行
这是容易被忽略的便利特性：
HTMLCollection允许用字符串键名访问（如表单元素的name属性或元素id），NodeList只支持数字索引：const form = document.querySelector('form'); console.log(form.elements['username']); // ✅ HTMLCollection，可用 name 查找 console.log(form.querySelectorAll('input')[0]); // ✅ NodeList，只能用 [0]这种差异在处理表单时特别明显——别试图对
form.elements（HTMLCollection）用querySelector风格的字符串查找。真正麻烦的不是记住区别，而是混合使用时忘了类型判断。比如把
getElementsByClassName结果传给一个只接受数组的方法，却没做Array.from—— 错误不会立刻报，但forEach会静默失效。
