调用 getElementById 获取不存在的 ID 返回 null，后续操作 null 才报错；应先判断存在性（if (el)）、用可选链（?.）安全读取，或封装 safeGet 函数，并确保 DOM 加载完成后再执行。
直接调用 getElementById 获取一个不存在的 ID，不会报错，而是返回 null。真正导致报错的是——你后续对这个 null 值做了操作，比如访问它的属性（innerHTML）、调用它的方法（addEventListener）或设置其值（value = 'xxx'），这时浏览器会抛出 TypeError: Cannot read property 'xxx' of null。
检查元素是否存在再操作
最常用也最推荐的方式：在使用前加一层存在性判断。
- 用
if (el)或if (el != null)判断是否获取成功 - 把后续操作全部放在条件块内，避免执行到空值上
例如：
const btn = document.getElementById('submit-btn');<br>if (btn) {<br> btn.addEventListener('click', handleSubmit);<br> btn.disabled = false;<br>}
使用可选链操作符（?.）简化安全访问
如果你只读取属性或调用方法，且项目支持 ES2020+（现代浏览器或已配置 Babel/TS），可用可选链避免报错：
-
btn?.addEventListener('click', fn)—— 如果btn是null或undefined，整条语句静默跳过，不执行也不报错 -
console.log(btn?.innerHTML)—— 安全读取，不存在时返回undefined
注意：它不能替代赋值操作（如 btn?.disabled = true 无效），赋值仍需先判断。
封装一个安全获取函数
如果项目中频繁需要容错处理，可以封装一个带默认行为的工具函数：
function safeGet(id, options = {}) {<br> const el = document.getElementById(id);<br> if (!el && options.warn !== false) {<br> console.warn(`Element with id "${id}" not found`);<br> }<br> return el || options.fallback || null;<br>}<br>// 使用：<br>const header = safeGet('page-header', { fallback: document.body });
开发阶段主动预防
很多“ID 不存在”问题其实源于拼写错误、DOM 加载时机不对，或服务端/模板未渲染对应节点：
- 确保脚本在 DOM 加载完成后执行（用
DOMContentLoaded或把 script 放在</body>前） - ID 名称前后加统一前缀（如
js-modal-close），降低命名冲突和手误概率 - 在调试时快速验证：
console.log(document.getElementById('xxx'))看是否为null
