单页应用路由切换时应限定dom查询范围至当前视图唯一容器，避免查到残留节点；清理旧视图前需检查isconnected、解绑事件并清除数据引用；查询与清理须在路由生命周期明确阶段同步执行。
单页应用路由切换时，DOM 查询若不加约束，很容易查到已隐藏但未销毁的旧视图节点，导致重复绑定、事件冲突或内存泄漏。关键不是“查得快”，而是“查得准”——只命中当前活跃视图内的元素，避开残留 DOM。
限定查询范围：用唯一容器锚定当前视图
避免全局查询 document.querySelectorAll('.btn-submit')，它会扫出所有路由中曾渲染过的同名按钮。应始终将查询限制在当前视图容器内：
- 每个路由视图对应一个带唯一 ID 或 data 属性的根容器，如
<div id="view-user-detail">...</div> - 查询时以该容器为起点：
viewEl.querySelector('form')或viewEl.querySelectorAll('[data-action]') - 若使用模板引擎（如 EJS），确保每次路由加载都复用同一容器元素（
layout.append(view)而非layout.append(view.childNodes)），否则容器本身丢失，后续无法作为查询锚点
清理旧视图前，先确认它是否仍被引用
直接调用 oldView.remove() 不够安全——若该节点已被其他逻辑（如动画库、第三方组件）持有引用，仅移除 DOM 不等于释放内存。
- 移除前检查是否已从文档中脱离：
!oldView.isConnected，避免重复操作 - 手动解绑其上所有事件监听器（尤其 document/window 级委托）：
oldView.removeEventListener('click', handler) - 如有通过
WeakMap关联的数据，可利用容器元素作 key 自动失效；若用普通Map，需同步map.delete(oldView)
配合生命周期，在正确时机执行查询与清理
查询和清理必须落在路由切换的明确阶段，不能依赖 DOM 渲染完成后的异步时机（如 setTimeout），否则可能查到过渡态中间节点。
- React：在
useEffect清理函数中查询并移除上一视图残留节点（如document.getElementById('view-legacy')） - Vue：在
onBeforeUnmount中执行viewEl?.remove()，并在onMounted中基于新viewEl查询子元素 - 纯 JS 路由：在
popstate或hashchange处理器中，先清理旧容器，再加载新模板，最后对新容器做查询
不复杂但容易忽略：精准查询的前提是视图容器结构稳定、可识别、不被意外移动。只要锚点清晰，后续所有 DOM 操作就自然落在边界内。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
