用 document.querySelectorAll('*') 计算 DOM 深度会失真，因浏览器静默修正非法 HTML 导致结构拍平；真正影响性能的是节点总数与平均路径长度，而非视觉缩进层数。
为什么用 document.querySelectorAll('*') 算深度会失真
DOM树深度 ≠ 嵌套层数，浏览器静默修正后，原本“深嵌套”的结构可能被拍平成兄弟节点。比如你写
<div><p><div>内容</div></p></div>，实际 DOM 是 <code><div></div><p></p><div>内容</div> 三层并列——<code>querySelectorAll('*') 递归统计出来的“最大深度”毫无参考价值。</p>
<ul>
<li>真正影响性能的是节点总数和平均路径长度，不是视觉缩进层数</li>
<li>用 <code>document.body.querySelector('div p div') 查不到东西？别急着改 JS，先看 Elements 面板里这串路径是否存在</li>
<li>W3C Validator 报的 <code>Element div not allowed as child of element p 才是深度异常的根源信号
哪些 HTML 结构会导致 DOM 树意外膨胀
不是标签多就树大，而是非法嵌套触发浏览器反复拆解+重挂载，凭空多出大量孤立节点。最典型三类：
<ul><div>...</div></ul>：浏览器把 <code><div> 踢到 <code><ul> 外，同时补一个空 <code><ul></ul> 占位，节点数+2</li> <li><code><p><h2>标题</h2></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>：强制闭合 <code><p>，再插入 <code><h2>，父子关系断裂，样式继承链中断</li> <li><code><table><div>...</div></table>：漏写 <code><tr><td>，整个 <code><div> 被移到 <code><table> 上方，还可能触发隐式 <code><tbody> 插入</li> </ul> <p>这些操作不报错，但 <code>document.querySelectorAll('*').length 会比原始 HTML 字符数暗示的多出 15%–40%。</p> <H3>用 getComputedStyle 判断结构是否被破坏</H3> <p>当 CSS 表现异常（比如某块突然 inline 显示、margin 失效、font-size 回退），往往不是样式写错了，而是父级上下文丢失了。此时 <code>getComputedStyle(el).display 可能返回 <code>inline，但 el.parentElement 为 <code>null —— 它已被踢成孤儿节点。</p> <ul> <li>执行 <code>document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log(el.tagName, '孤立') })</li> <li>对疑似节点检查 <code>el.parentNode === el.ownerDocument.documentElement：如果是，说明它被提到根下，完全脱离原层级- 特别注意
<img alt="基于DOM树分析的HTML结构质量评估实践" > 标签写成 <code><img alt="基于DOM树分析的HTML结构质量评估实践" ></img> 时，后续所有元素都会被塞进这个非法闭合的“伪容器”里，导致整页 DOM 错位</li> </ul> <H3>CI 中自动拦截低质量 HTML 结构</H3> <p>靠人工肉眼检查嵌套太晚，应在构建阶段卡住。W3C Validator 的 nu API 支持直接传 HTML 字符串校验：</p> <pre class="brush:php;toolbar:false;">curl -F "uploaded_file=@index.html" https://validator.w3.org/nu/
返回 JSON 中
messages 数组的第一个 <code>type: "error"就是源头问题。重点盯住subType: "contentModel"类错误，它们直接对应 DOM 树构建规则违反。真正难的不是发现
<p> 里有 <code><div>，而是你写的 CSS 选择器 <code>.article > p > span 还在按原始结构匹配——而真实 DOM 里根本不存在这个路径。
