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，后续新增<div>会立刻出现在该集合里 -
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 只支持数字索引：
立即学习“Java免费学习笔记（深入）”；
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 会静默失效。
