DOM节点移除后继续操作易致报错、内存泄漏或静默失效；最可靠判断其是否脱离文档的方式是检查node.isConnected属性，它零开销、兼容性好且准确。
DOM 节点一旦被移除（detached），它就不再属于文档树，此时继续在其上操作或监听，轻则报错，重则引发内存泄漏或静默失效。条件链路若未主动识别 detached 状态，容易在 removeEventListener、querySelector、MutationObserver.observe() 等调用中抛出异常，或让监听器“悬空”滞留。
先确认节点是否已脱离文档
最可靠、零开销的判断方式是检查
—— 它是原生只读属性，返回布尔值，不触发重排，且兼容性好（Chrome 51+、Firefox 53+、Safari 10.1+、Edge 79+）。
✅ 推荐写法：
或
❌ 避免用
：需遍历整棵树，性能差；更糟的是，若 el 是 documentFragment 或 ShadowRoot 子节点，结果可能误判
❌ 不要用
：fragment 中的节点 parentNode 为 null，但并未 detached；而被 append 到其他文档（如 iframe）的节点也可能 parentNode 为 null，却仍活跃
监听器注销前加 detached 检查
在调用
前，务必确认目标元素仍在文档中——不是为了防止报错（该方法本身容错），而是避免对已销毁节点做无意义调用，干扰调试与资源追踪。
对单个元素：直接
对批量管理（如 WeakMap 映射）：遍历前先过滤
，再逐个清理
特别注意 MutationObserver：observe() 方法在 detached 节点上调用会静默失败（不抛错但不生效），因此初始化前必须校验
，否则 observer 将“假启动”
事件监听器绑定时就建立自动注销契约
与其依赖手动注销，不如从绑定阶段就约定生命周期。核心是利用 WeakMap + isConnected + 闭包清理逻辑，实现“节点一走，监听器自动失活”。
用 WeakMap 存储「元素 → 清理函数」映射，清理函数内部调用
并可执行其他收尾
绑定监听器时，同时注册一个微任务检测：
，确保即使同步移除也能及时响应
对异步挂载场景（如 Vue
/ React
），在 effect 清理函数中显式调用 cleanup，并再次检查
防止竞态
修复回调中避免反向触发 detached 异常
MutationObserver 或自定义钩子的回调里，常需对变更节点执行修复（如移除广告 script、还原 style）。这些操作若作用于已 detached 的 target，可能引发 DOMException 或静默忽略。
修复前统一加守卫：
不要直接
：先判断
，再操作
涉及
或
写入时，优先用
（无解析风险），并包裹 try/catch，捕获
等 detached 相关错误
node.isConnectedif (!el.isConnected) return;if (el.isConnected) { /* 安全执行 */ }document.contains(el)el.parentNode === nullremoveEventListenerif (el.isConnected) el.removeEventListener('click', handler);Array.from(map.keys()).filter(el => el.isConnected)targetEl.isConnectedremoveEventListenerqueueMicrotask(() => { if (!el.isConnected) cleanup(); });onMounteduseEffectel.isConnectedif (!mutation.target.isConnected || !container.contains(mutation.target)) return;mutation.target.remove()mutation.target.parentElement?.contains(mutation.target)innerHTMLtextContenttextContent"HierarchyRequestError"