JavaScript中如何操作节点_NodeList和HTMLCollection有何区别

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 会静默失效。