htmlcollection 总是动态的，由 getelementsby* 方法返回，自动响应 dom 变化；nodelist 可能静态（如 queryselectorall 返回）或动态（极少见），现代浏览器中 childnodes 也返回静态 nodelist。
NodeList 和 HTMLCollection 都是 DOM 中用于存储节点集合的对象，但它们的“静态性”或“动态性”取决于获取方式，而不是类型本身。关键在于：是否自动响应 DOM 变化。
HTMLCollection 总是动态的
HTMLCollection 由 getElementsBy* 方法返回（如 getElementsByClassName、getElementsByTagName、getElementsByName），它始终是**实时集合（live collection）**：DOM 元素增删后，集合内容会自动更新。
- 例如：
const divs = document.getElementsByTagName('div');，之后用document.body.appendChild(document.createElement('div'))，divs.length会立刻增加 1； - 它只包含元素节点（Element），不包括文本或注释节点；
- 支持通过索引和
namedItem()（按 id 或 name 属性）访问成员，但不支持数组方法（如forEach、map）。
NodeList 可能是静态或动态的
NodeList 的行为取决于创建方式：
-
动态 NodeList：由
document.querySelectorAll()返回的是**静态集合**（static collection）——快照式，不随 DOM 改变而更新； -
静态 NodeList：由
document.childNodes、element.children（注意：children实际返回 HTMLCollection）、parentNode.childNodes等属性返回的 NodeList 多为**动态**（但现代标准中childNodes是静态的；而getElementsBy*不返回 NodeList）； - 更准确地说：
querySelectorAll总是返回静态 NodeList；Node.childNodes在所有主流浏览器中也返回静态 NodeList（尽管规范曾模糊，实际已统一）；真正动态的 NodeList 极少见，通常不必依赖其动态性。
如何判断一个集合是否动态
没有直接 API 判断，但可通过简单测试验证：
- 先获取集合（如
const list = document.getElementsByTagName('p');）； - 执行 DOM 修改（如
document.body.innerHTML += '<p>New</p>'）； - 再次读取
list.length—— 若变化，说明是动态集合（大概率是 HTMLCollection）；若不变，则是静态 NodeList。
实际使用建议
为避免意外行为，推荐统一转为数组操作：
-
Array.from(htmlCollection)或[...htmlCollection]转 HTMLCollection 为数组； -
Array.from(nodeList)或[...nodeList]同样适用于 NodeList； - 需要响应式更新时（如监听 DOM 变化），不要依赖集合自动更新，改用
MutationObserver； - 优先使用
querySelectorAll（返回静态 NodeList，行为可预测）替代getElementsByClassName（动态但易引发逻辑错误）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
