document.getElementById 返回 null 的主因是 DOM 未就绪或 HTML 结构被浏览器解析器静默修复（如 <p><div> 被拆分为 <p></p><div>...</div><p></p>），导致目标元素实际位置与预期不符，且该过程不报错、不可捕获。
document.getElementById 返回 null，不是 JS 写错了，是 DOM 根本没建好或结构被浏览器悄悄改了。
为什么 getElementById 找不到元素却没报错
HTML 解析器不抛异常，它只按规范修复结构。你写的 <p><div>content</div></p> 会被立刻拆成 <p></p><div>content</div><p></p> —— <p> 被隐式闭合，<div> 被踢到外面。你在 JS 里查 id="inside"，它早就不在 <p> 里了。
- DOM 中永远看不到原始 HTML 字符串，
document.body.innerHTML返回的是修复后的结果 - 用正则数
<div>和</div>个数来判断是否闭合？不可靠，DOM 已被重排 - 错误不会触发
try/catch，也不会进window.onerror，它静默发生
DOMParser().parseFromString 看似成功，其实结构已偏移
DOMParser 永远返回一个 Document 对象，哪怕输入是 "<foo><bar>"。它不报错，但生成的 DOM 可能和你预期完全不符：
-
<p><img src="x"/><div>hello</div></p>→<p></p><img><div>hello</div><p></p> -
<table><div>bad</div></table>→<table></table><div>bad</div>（<div>不被允许在<table>内） - 检查
doc.body.children.length === 0只能发现极端空解析，无法识别嵌套错位
非标准标签（如 <my-component>）在 DOM 接口中的行为差异
自定义标签本身合法，但若未注册为 custom element，它就是个 unknown element，不影响解析，但会改变 DOM 接口行为：
立即学习“前端免费学习笔记（深入）”；
-
document.querySelector('my-component')能取到节点，但node.tagName是大写"MY-COMPONENT"（HTML 规范强制转大写） -
node instanceof HTMLElement为true，但node.constructor.name是"HTMLElement"，不是你期望的类名 - 若混用框架（如 Vue 的
v-html插入含<my-component>的字符串），它不会升级，只是普通节点，querySelector可查，shadowRoot为null - 真正出问题的是当它被误当作内置语义标签使用：比如把
<my-header>塞进<article>后又指望article.firstElementChild是<header>
运行时唯一靠谱的结构校验方式
别指望 JS 在页面加载后“检测出 HTML 错误”，它只能验证当前 DOM 状态是否符合你的业务假设：
- 如果某区域必须有且仅有一个
<main>，就写if (document.querySelectorAll('main').length !== 1) console.warn('missing or duplicated <main>') - 如果某个容器内必须包含
<ul>，就检查container.firstElementChild?.tagName !== 'UL' - 所有这类断言都应放在
DOMContentLoaded后执行，且不能替代构建期检查 - 真要拦截非法结构，必须用
html-validate或 W3C Validator 在 CI 阶段跑，而不是等上线后靠 JS 补救
最常被忽略的一点：浏览器对非标准结构的修复逻辑是确定性的，但不同场景下隐式闭合顺序、栈弹出深度、兄弟节点类型判断都高度依赖上下文——这意味着同一段错误 HTML，在 <section> 里和在 <footer> 里可能生成完全不同的 DOM 树。
