请问NodeList与HTML Collections有何区别？它们和普通数组又有何不同？

一、NodeList 和 HTMLCollection 的核心差异 #

1. 包含的节点类型不同 #

• HTMLCollection 仅能包含元素节点（Element），也就是<div>、<p>这类HTML标签对应的节点，文本、注释这类非元素节点不会被纳入。
• NodeList 可以包含任意类型的DOM节点，除了元素节点，还包括文本节点、注释节点（<!-- 注释内容 -->）、文档节点等。
  实际示例：
• document.getElementsByTagName('div')返回HTMLCollection，只会抓取页面里的<div>元素；
• document.querySelector('.container').childNodes返回的NodeList，会包含该容器下的所有节点——包括换行文本、注释，以及子元素。

2. 实时性 vs 静态性 #

• 绝大多数HTMLCollection是**实时（live）**集合：当DOM结构发生变化时，集合会自动同步更新。比如用document.getElementsByTagName('p')获取所有<p>标签后，页面新增了一个<p>，这个集合会自动把新元素加进去。
• NodeList大多是**静态（static）**集合：比如querySelectorAll返回的NodeList，DOM更新后它不会自动变化，始终保持获取时的状态。唯一例外是childNodes返回的NodeList，它是实时的。

3. 可用方法与属性不同 #

• HTMLCollection 自带namedItem()方法，可以通过元素的id或name属性快速获取对应元素；但默认没有forEach()遍历方法，需要用for...of或者手动转换后再遍历。
• NodeList 没有namedItem()，但现代浏览器都支持它的forEach()方法；部分旧环境可能需要手动实现遍历。
  代码示例：

// HTMLCollection 使用 namedItem
const inputs = document.getElementsByTagName('input');
const emailInput = inputs.namedItem('email'); // 通过name/id获取元素

// NodeList 使用 forEach
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => box.style.color = 'red');

二、它们与普通数组的区别 #

1. 原型链归属不同 #

普通数组的原型是Array.prototype，因此可以直接调用map()、filter()、reduce()等数组专属方法；而NodeList和HTMLCollection的原型分别是NodeList.prototype和HTMLCollection.prototype，不属于数组原型链，默认无法使用这些数组方法。

2. 静态/实时特性不同 #

普通数组是完全静态的，创建后不会自动改变；而部分HTMLCollection和少数NodeList是实时的，会随DOM变化自动更新内容。

3. 转换为数组的方式 #

如果需要在NodeList或HTMLCollection上使用数组方法，必须先把它们转换为普通数组，常用方式有三种：

// 方式1：Array.from()
const arrFromNodeList = Array.from(document.querySelectorAll('div'));

// 方式2：展开运算符
const arrFromCollection = [...document.getElementsByTagName('p')];

// 方式3：借助Array.prototype.slice
const arrFromClass = Array.prototype.slice.call(document.getElementsByClassName('card'));

内容的提问来源于stack exchange，提问作者Chikowski Alfredo