DOMContentLoaded在HTML解析完成、DOM树构建完毕后立即触发，不等待图片、iframe、CSS及async脚本加载；比window.onload更早，适用于需尽早操作DOM的场景。

DOMContentLoaded 事件的基本触发时机 这个事件在 HTML 文档解析完成、DOM 树构建完毕后立即触发，但不等待 img、iframe、CSS 文件或异步脚本加载完成。它比 window.onload 更早，适合需要尽早操作 DOM 的场景，比如初始化按钮绑定、表单校验或动态插入元素。

注意：如果 JS 脚本放在 底部，其实多数情况下不需要监听该事件——因为此时 DOM 已就绪。只有当脚本位于 或需确保跨环境（如被其他框架提前注入）时才真正需要它。

正确添加 DOMContentLoaded 监听器的三种方式 最稳妥的是使用 addEventListener，避免覆盖已有监听器：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 推荐写法：

  document.addEventListener('DOMContentLoaded', () => {
    // 这里写你的 DOM 操作
    document.getElementById('myBtn').addEventListener('click', handleClick);
  });

• 不推荐用 document.onreadystatechange 判断 readyState === 'interactive'，行为不一致且 IE 兼容性差
• 不要用 document.onload —— 它根本不存在，是常见拼写错误

为什么有时 DOMContentLoaded 不触发？常见陷阱 最常踩的坑是脚本执行时机和文档状态冲突：

• 脚本在 <iframe></iframe> 内运行时，监听的是 iframe 的 document，不是主页面的 —— 必须明确作用域
• 在服务端渲染（SSR）或微前端场景中，若页面已被“激活”过一次，再次调用 addEventListener 可能错过事件（事件已触发）；可先检查 document.readyState：

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init(); // 已就绪，直接执行
  }

• 某些构建工具（如 Vite）开启 esbuild 压缩后，会把顶层箭头函数转为 IIFE，若未包裹在事件监听内，可能因执行过早导致 getElementById 返回 null

与 jQuery.ready() 和现代框架的对比 $(document).ready() 本质就是对 DOMContentLoaded 的封装加兼容处理，但在纯现代项目中没必要引入 jQuery。Vue/React 等框架通常有自己的挂载逻辑（如 mounted 或 useEffect(() => {}, [])），它们内部也依赖类似机制，但会延迟到组件树准备就绪，而非仅 DOM 解析完成。

如果你在 React 中仍手动监听 DOMContentLoaded，大概率说明逻辑放错了位置——DOM 操作应交给 ref + effect，而不是抢在框架之前硬改。

实际项目里，真正需要显式监听它的场合越来越少；但一旦遇到「JS 在 head 里、又必须操作 body 内元素」，它仍是不可替代的底层保障。别忘了检查 readyState，否则容易在快节奏 SPA 切换中静默失败。