DOM查询返回null的根本原因是元素未加载完成就执行查询，常见于脚本置于head中且未加defer，解决方法包括移至/body前、使用defer、监听DOMContentLoaded事件，并需校验选择器语法及动态元素插入时机。
DOM 查询返回 null 是最常见的 JavaScript 运行时错误源头之一，本质不是“空指针异常”（JS 没有该术语），而是对 null 调用方法或访问属性时抛出 TypeError: Cannot read property 'xxx' of null。核心原因只有一个：**元素还没加载完成，你就去查它了**。
确认元素是否已真实挂载到 DOM
最常见的情况是脚本在 <body> 内容渲染前执行（比如把 <script> 放在 <head> 里，又没加 defer）。此时 document.getElementById('myBtn') 或 document.querySelector('.item') 必然返回 null。
- ✅ 推荐做法：把脚本标签移到
</body>之前；或给<script>加defer属性（适用于外部脚本） - ✅ 更稳妥的做法：监听
DOMContentLoaded事件再执行查询 - ❌ 避免用
window.onload—— 它等所有资源（图片、样式表）加载完，太晚
检查选择器是否写错或目标元素不存在
拼写错误、大小写不一致、类名多空格、ID 带特殊字符未转义……都会让查询失败。
- 用浏览器开发者工具的
Elements面板手动搜索，确认元素确实存在且结构匹配 - ID 选择器中若含点号（
.）、冒号（:）等 CSS 特殊字符，需用反斜杠转义：querySelector('#user\.name') - 类名选择器不要漏掉点：
querySelector('button.submit')≠querySelector('button submit') - 动态生成的元素（如 Vue/React 渲染后、AJAX 插入的）必须等插入 DOM 后再查
避免直接链式调用，加一层安全检查
不要写 document.querySelector('#btn').addEventListener(...) 这种“裸调用”。一旦查不到，立刻崩。
立即学习“Java免费学习笔记（深入）”；
- ✅ 显式判断：
const btn = document.querySelector('#btn'); if (btn) { btn.addEventListener(...); } - ✅ 可选链操作符（ES2020+，现代项目推荐）：
document.querySelector('#btn')?.addEventListener('click', handler); - ✅ 使用
??提供默认行为：const el = document.querySelector('.main') ?? document.body;
调试技巧：快速定位问题位置
别靠猜。打开控制台，逐行验证：
- 直接在 Console 输入
document.querySelector('#xxx')，看返回值是不是null - 打印父容器，确认嵌套路径是否正确：
console.log(document.querySelector('#container')?.innerHTML) - 用
debugger或断点，在查询语句前暂停，检查当前 DOM 状态 - 临时加一句
console.log(document.body.innerHTML.length)，确认页面是否已开始渲染
归根结底，null 不是 bug，是提示——它在告诉你：“你要的东西现在不在那儿”。看清时机、核对语法、加层防护，问题就解了一大半。
