关键在于理解获取方式决定集合动态性：htmlcollection 总是动态，queryselectorall() 和 node.childnodes 返回静态 nodelist，node.children 实际返回动态 htmlcollection；for 循环中修改 dom 时应转数组或缓存长度以防死循环。
关键不是记住“哪个是动态、哪个是静态”，而是理解获取方式决定行为，并在遍历时主动控制集合状态。死循环往往发生在用动态集合做 for 循环且循环体中修改 DOM 时。
看清获取方法对应的真实行为
不要凭类型名判断，要盯住你调用的是哪个 API：
-
HTMLCollection 总是动态的：所有
getElementsBy*方法（getElementsByClassName、getElementsByTagName、getElementsByName）返回的都是实时集合，每次读取.length或访问索引都会重新扫描 DOM -
NodeList 分情况：
-
querySelectorAll()→ 静态 NodeList：快照，DOM 后续变化不影响它 -
node.childNodes→ 静态 NodeList（现代浏览器已统一，包括 Chrome/Firefox/Safari/Edge） -
node.children→ 实际返回的是 HTMLCollection（不是 NodeList），所以仍是动态的
-
for 循环中改 DOM？先转成真数组或缓存长度
动态集合在 for 条件里反复求值，极易触发死循环。比如：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const lis = ul.getElementsByTagName('li'); // HTMLCollection，动态
for (let i = 0; i
<p>安全做法有两种：</p>
- 用
Array.from(lis)或[...lis]转成数组再遍历（适合数据量不大、需链式操作的场景） - 提前缓存长度：
const len = lis.length; for (let i = 0; i （轻量高效，推荐）
需要实时响应？明确选择动态接口，但避免在循环中依赖其变化
如果你确实需要反映最新 DOM 状态（比如监听区域持续新增的元素），可用 getElementsBy*，但别在它的循环里增删同级节点。更稳妥的方式是：
- 用
MutationObserver监听插入，而不是轮询集合长度 - 若必须轮询，改用
querySelectorAll获取初始快照 + 单独查询新增项（如document.querySelectorAll('li:last-child')）
别忘了它们都不是数组——方法支持有差异
即使 NodeList 是静态的，早期版本也不支持 forEach；HTMLCollection 则完全不支持数组方法：
-
HTMLCollection：只支持数字索引和namedItem()，不能直接.forEach、.map -
NodeList（现代）：静态和动态都支持.forEach、.entries()等迭代方法（IE 不支持，需注意兼容性） - 保险写法：统一用
for (let i = 0; i ，不依赖原型方法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
