DOM树截断主因是HTML解析器提前终止：Content-Type非text/html、响应无DOCTYPE/html标签、head内内联脚本执行报错未捕获、标签未闭合触发纠错、第三方脚本篡改DOM结构。
DOM树突然截断，document.body为空或document.documentElement为null怎么快速判断原因
这不是JS报错，而是HTML解析器在某个位置彻底停摆了——浏览器连<html>都没建出来，后续一切皆无。第一反应不是查JS，而是看HTTP响应本身是否合规：
- 检查Network面板中HTML请求的
Content-Type是否为text/html；若返回text/plain或application/json，解析器直接放弃建树 - 用
curl -s URL | head -n 5确认响应开头是否有<!DOCTYPE html>或<html；若首行是空、注释、或JSON字符串，document.documentElement必然null - 打开Console，执行
document.querySelector('script[src]')；如果返回null但页面里明明写了<script src>，说明脚本标签根本没被解析到——中断点一定在它之前</script>
<script>放在<head>里就中断，但移下去就好了，为什么
浏览器线性解析：遇到<script>就暂停HTML解析，同步执行脚本；一旦脚本抛出未捕获错误（比如document.getElementById('x')查不到），且该脚本位于<head>靠前位置，解析器不会恢复，后面所有标签（包括<body>）都不进DOM。
- 典型错误：
<script>document.querySelector('#main').innerHTML = 'ok'</script>写在<head>，但#main在<body>底部 → 报Cannot read property 'innerHTML' of null→ 解析终止 - 内联脚本必须包裹：
document.addEventListener('DOMContentLoaded', () => { ... })，但注意这比defer多一次事件调度 - 更稳妥做法：统一用
<script defer src="app.js"></script>，它不阻塞解析，且即使app.js报错，已解析的DOM仍完整
Elements面板里看到<footer>跑进<header>里，但源码明明没嵌套，怎么回事
这不是渲染错乱，是浏览器在构建DOM树时，因前面某处标签未闭合，被迫启动纠错逻辑，把后续所有内容“塞进”最近合法父容器里。你看到的DOM结构，已是修复结果，不是原始意图。
- 重点排查三类高危标签：
<table>里塞<div>、<ul>里写<p>、<p>里嵌<section>——这些都会触发强制重排，DOM树立刻失真 - Elements面板中节点边缘出现灰色/红色提示，或右键
Edit as HTML后结构“跳变”，都是纠错证据 - 别改看到的位置，用
document.querySelectorAll('*').length对比前后变化；若数值突增数百，说明前面漏闭合导致后续几百行被错误包裹
第三方广告脚本一加载，element.closest('.form')就返回null，但元素还在页面上
广告脚本不是删了你的元素，而是动态插入 wrapper 或移动父容器，物理父子关系被破坏。closest()依赖的是当前DOM树中的真实层级，不是class名存在与否。
立即学习“前端免费学习笔记（深入）”；
- 立即验证：
console.log(element.parentElement?.className)，如果输出ad-wrapper或banner-container，就是广告SDK加的中间层 - 监听结构变动：
new MutationObserver(() => { /* 检查addedNodes是否含ad-*类名 */ }).observe(document.body, { childList: true, subtree: true }) - fallback策略要限定范围：
document.querySelector('main')?.querySelector('.form')，避免全局querySelector命中广告生成的同名节点
DOM树构建异常最棘手的地方在于：错误源头和现象位置往往相隔几十甚至上百行，而浏览器的自动纠错又掩盖了原始问题。盯住document.documentElement是否存活、Elements面板是否出现灰色节点、以及$$('*').length是否异常增长，比盯着控制台第一条报错更有价值。
