querySelector与querySelectorAll区别详解

• 新增
• ？不影响 items.length
• 删除某个
• ？items[0] 还是指向原来的元素（除非那个元素被移出文档，此时引用仍存在但已脱离 DOM）
• 循环遍历时用 for (let i = 0; i 是安全的，不会死循环

动态节点：每次访问都重新查 DOM

像 document.getElementsByTagName('li') 返回的是 HTMLCollection，它本身不存元素，只存查询规则（如“找所有标签名为 li 的子元素”）。每次你读 .length、取 [0] 或调用 .item(0)，浏览器都会实时重跑一次匹配逻辑。

• DOM 新增一个
• ，下一次读 list.length 就自动 +1
• 在 for 循环里边遍历边往父容器加
• ，很可能触发无限循环
• 它更轻量（创建快），但反复访问代价高（每次都查树）

关键不在“存不存元素”，而在“何时查、查几次”

两者存的都是 DOM 节点的引用，不是拷贝。区别在于：

• 静态 NodeList：调用时查一次，结果缓存；之后所有操作都基于这份缓存
• HTMLCollection：调用时不查，访问属性或索引时才查；每次都是新鲜结果

为什么 querySelectorAll 必须静态？规范强制

W3C 明确规定：querySelectorAll() 必须返回静态 NodeList。这是为了行为可预测——开发者能放心地遍历、映射、传参，不必担心中途 DOM 变动导致逻辑错乱。而 getElementsByXXX 系列没这限制，历史原因保留了动态语义。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《querySelector与querySelectorAll区别详解》文章吧，也可关注golang学习网公众号了解相关技术文章。