dom 查询返回 null 或 undefined 的主因是脚本执行过早或选择器不匹配；应确保 dom 加载完成（domcontentloaded 或 script 放 body 底部），核对 id/class 拼写与结构，检查动态插入时机、iframe/shadow dom 特殊场景，并添加 null 判断防御性编程。
JS 中 DOM 查询返回 null 或 undefined，最常见表现是控制台报错 Cannot read properties of null。这不是语法错误，而是逻辑时机或匹配条件出问题。解决它不靠猜，而靠分步验证。
确认脚本执行时机是否过早
这是八成以上 null 问题的根源：JS 在目标元素还没被浏览器解析进 DOM 时就执行了查询。
- 检查
<script></script>标签位置——如果写在或 HTML 开头，且目标元素在后面，大概率失败 - 改用
DOMContentLoaded事件确保 DOM 构建完成后再执行：document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('app'); if (el) el.innerHTML = 'loaded'; }); - 或把
<script></script>放在前——这是最简单、零成本的兜底方案
核对选择器写法与 HTML 实际结构
拼写、符号、层级稍有偏差，就会查不到。注意两个 API 的关键区别：
-
getElementById('box')：只传 ID 名，**不加#**；若 HTML 中 ID 重复，它只返回第一个，但规范要求 ID 唯一 -
querySelector('#box')：必须加#（ID）、.（class）等 CSS 语法；漏写#是高频低级错误 - 检查 HTML 是否真有该元素：打开 DevTools 的 Elements 面板，
Ctrl+F搜索id="box"，确认存在且未被浏览器静默移除（比如<p></p> <div></div>中的<div> 会被踢出 <code><p></p>）排查动态生成或特殊容器中的元素
元素不是静态写死在 HTML 里？那要额外判断它是否存在：
- 由 JS 动态插入（如
appendChild、innerHTML +=）后，需确保插入完成再查——不能查完再插 - 在
<iframe></iframe>里？document.getElementById默认查主文档，得用iframe.contentDocument.getElementById - 用了 Shadow DOM？普通查询无法穿透，需通过
element.shadowRoot.querySelector - 框架项目（React/Vue）中，不要在组件挂载前查 DOM，应放在
useEffect、mounted等生命周期钩子内
快速验证与防御性写法
别等报错才行动，日常写法加一层安全校验，既防崩又易调试：
- 查询后立刻判断是否为 null：
const btn = document.querySelector('.submit-btn'); if (!btn) { console.warn('按钮 .submit-btn 未找到，请检查 HTML 或执行时机'); return; } btn.addEventListener('click', handler); - 用
document.querySelectorAll查多个时，检查.length而非直接取[0]，避免静默失败 - 在控制台手动运行
document.getElementById('xxx')，看返回值——这是最快定位问题的方式
- 由 JS 动态插入（如
