querySelector返回的是DOM快照而非实时引用，删除对应节点后变量仍指向孤儿节点，需用isConnected校验或重新查询。
因为 querySelector 返回的是单个元素引用，不是“活”的连接，它本身不会随 DOM 变化而自动失效或更新。你删了它对应的 DOM 节点，这个 JS 变量依然存在、依然能访问——但此时它指向的是一个已被移除的“孤儿节点”，继续操作可能不生效，甚至报错。
它只是个快照，不是实时监听器
querySelector 不是订阅机制，也不绑定 DOM 生命周期。它执行那一刻，就从当前 DOM 树里抓出第一个匹配元素，返回一个 Element 对象。之后无论你增删改查 DOM，这个变量值不变，也不会自动置为 null 或 undefined。
- 比如
const btn = document.querySelector('.delete-btn')，之后你用btn.remove()或者parent.removeChild(btn)删除了它，btn变量仍持有那个已脱离文档的节点对象 - 此时调用
btn.click()可能触发事件（事件监听器还在），但btn.parentElement会是null，btn.isConnected是false
常见误操作：删了 DOM 却还用旧引用
很多人以为“删了元素，引用就失效了”，结果在后续逻辑里继续用这个变量，导致行为异常：
- 给已删除按钮再次绑定事件 → 无效果（事件没挂到文档上）
- 修改已删除节点的 class 或 textContent → 代码不报错，但页面没变化
- 判断
if (btn)为真，误以为按钮还在页面上
✅ 正确做法是：需要确认节点是否仍在文档中时，检查 btn.isConnected；或者操作前重新查询：document.querySelector('.delete-btn')。
和 querySelectorAll 的区别也要注意
虽然 querySelectorAll 返回的是静态 NodeList（同样不会自动更新），但它和 querySelector 在“引用稳定性”上表现一致：两者都返回已有节点的引用，不随 DOM 删除/插入自动刷新。
- 你用
const items = document.querySelectorAll('.item')拿到 5 个节点，再删掉其中 2 个 →items.length还是 5，里面两个元素变成isConnected: false - 想得到“当前还在页面上的 .item”，得重新调用
document.querySelectorAll('.item')
怎么避免踩坑？三个实用建议
-
关键操作前重查：尤其在事件回调、定时器、异步完成后，别复用很久以前查到的节点，优先重新
querySelector -
用 isConnected 做安全校验：例如
if (el && el.isConnected) { el.focus(); } -
删除节点后手动清空相关引用（可选）：比如
btn = null;，让变量明确失效，减少误用可能
