DOMContentLoaded前操作DOM易因元素未就绪返回null/undefined，引发错误；脚本只能访问其上方已解析的元素，中脚本无法访问内容，document.body存在但子元素未必挂载。
脚本在 DOMContentLoaded 事件触发前操作 DOM，极易因元素尚未就绪而返回 null 或 undefined，进而引发 Cannot read properties of null 类型错误。关键不是“等不等”，而是明确知道哪些操作被限制、为何受限，以及如何绕过或规避这些限制。
DOMContentLoaded 前 DOM 的真实状态
浏览器解析 HTML 是线性的：遇到元素就创建节点，遇到 <script></script> 就暂停解析、立即执行脚本。这意味着：
- 脚本只能访问它「上方已解析完成」的元素（即在它之前已写入 HTML 的元素）；
-
中的脚本无法访问内任何内容； - 即使元素写在
开头，若脚本紧随其后但未用defer，也可能因解析未推进到该行而拿不到； -
document.body在标签开始解析时才存在，但其中子元素不一定已挂载。
哪些 DOM 操作在早期必然失败
以下操作在 DOMContentLoaded 前属于高危行为，应主动规避：
-
document.getElementById('x')—— 若id="x"的元素尚未出现在 HTML 流中，必返回null； -
document.querySelector('.btn')—— 同理，选择器匹配依赖 DOM 树实际结构，未生成即无匹配； -
element.addEventListener(...)—— 对null调用会直接抛出TypeError； -
document.forms[0]或document.images等集合访问——虽部分集合（如document.scripts）可能提前可用，但forms、images等需对应标签已解析，不可依赖。
不依赖事件监听的轻量级防御策略
无需等待完整事件，也能安全执行早期操作：
- 把脚本移到
闭合标签前——这是最简单有效的时机控制，确保所有常规 HTML 元素均已就绪； - 对关键元素做存在性校验：
const el = document.getElementById('main'); if (el) { el.classList.add('loaded'); }； - 用
defer属性加载外部脚本：<script defer src="app.js"></script>，它保证脚本在 DOM 解析完毕后、DOMContentLoaded前执行，且保持顺序； - 避免在全局作用域直接调用 DOM 查询，封装进函数，按需触发（例如绑定在按钮点击上，而非页面加载即执行）。
需要 DOM 就绪但又不能等太久的场景
某些逻辑（如首屏样式注入、第三方 SDK 初始化）需尽早运行，但又不能冒险查空元素：
- 使用
document.readyState主动轮询：if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); }； - 对动态插入的内容（如通过
innerHTML添加的表单），在插入后立即操作，而非依赖全局 DOM 就绪； - 在现代框架（Vue/React）中，改用生命周期钩子（
onMounted、useEffect(() => {}, [])）替代手动查 DOM，从根本上避开时机问题。
