根本原因是目标元素在当前DOM中不存在——可能未加载、已被移除、ID被动态重命名或脚本执行过早；需在视图就绪后获取，检查实际渲染ID，并避免重复绑定。
页面切换后 getElementById 失败，根本原因不是方法本身出错，而是目标元素**在当前 DOM 中根本不存在**——它可能还没加载、已被移除、ID 被动态重命名，或脚本执行时机不对。
确认元素是否真实存在于当前 DOM 中
SPA 页面切换时，旧内容常被销毁，新内容通过 JS 动态插入。如果直接在全局脚本里写 document.getElementById('myBtn')，而此时新页面的 HTML 还没渲染出来，就会返回 null。
- 切换完成后，手动在浏览器控制台运行该语句，看是否能取到——这是最直接的验证方式
- 用
console.log(document.body.innerHTML)检查当前 DOM 是否包含目标 ID 的标签 - 避免在页面初始化阶段（比如
<script>放在<head>里）就调用 getElementById，除非确保元素已存在
在正确时机获取元素
不要“一劳永逸”地提前获取，而应在视图真正就绪后再查。
- 路由切换完成后的回调中执行，例如监听
popstate后，等新内容插入 DOM 再查：window.addEventListener('popstate', () => { setTimeout(() => { const btn = document.getElementById('saveBtn'); if (btn) btn.addEventListener('click', handler); }, 0); }); - 如果用的是手动切换 DOM（如显示/隐藏 div），在
classList.add('active')或style.display = 'block'之后再获取 - 对异步渲染（如加载远程模板），确保在
innerHTML赋值完成后再查，必要时用MutationObserver监听节点插入
检查 ID 是否被框架或母板页修改
某些环境（如 ASP.NET Web Forms 母板页、部分构建工具）会自动重写 ID，导致你写的 id="submitBtn" 在最终 HTML 中变成 id="ctl00_ContentPlaceHolder1_submitBtn"。
- 查看浏览器 Elements 面板，确认实际渲染出的 ID 是什么
- 服务端渲染场景下，改用
document.getElementById('<%= submitBtn.ClientID %>')（ASP.NET）或服务端注入真实 ID - 前端框架中尽量避免硬编码 ID，改用 data 属性 +
querySelector，例如document.querySelector('[data-role="save-button"]')
避免重复绑定与内存泄漏
每次切换都重新获取并绑定事件，但未清理上一次的监听器，容易引发异常或行为错乱。
- 给事件处理器命名函数，便于移除：
function handleClick() { ... }<br>btn.addEventListener('click', handleClick);<br>// 切换前：<br>btn.removeEventListener('click', handleClick); - 使用事件委托：把监听器挂在不变的父容器上，用
event.target.matches('[data-action="submit"]')判断触发源 - 组件卸载时（如路由离开），主动清理定时器、监听器、观察者
