浏览器不拦截非法嵌套，而是按HTML5算法静默修正DOM树，导致结构与源码不符，引发CSS匹配失败、querySelector查不到、事件委托失效等问题。
浏览器根本不拦截非法嵌套，只默默重排DOM树
你写的 <p>文字</p>
<div>区块</div>
<div> 进入 <code><p></p> 时，判定违反 phrasing content 规则，于是强制闭合 <p></p>，再把 <div> 插入为兄弟节点。最终 DOM 是：<code><p>文字</p>
<div>区块</div>——和源码完全两样。
这意味着所有后续操作都基于这个“修正后”的树：CSS 选择器匹配不到、querySelector 查不到、事件委托失效。问题根源不在样式或脚本，而在你根本没意识到 DOM 已被重写。
用 Elements 面板识别被踢出的孤立节点
打开 Chrome DevTools → Elements 面板，重点看三点：
立即学习“前端免费学习笔记（深入）”；
- 灰色、半透明、缩进突兀的节点：那是被浏览器“踢出来”的孤立元素（比如
<ul></ul>里塞了<div>，<code><div> 就会被移到 <code><ul></ul>外） - 右键某个节点 → Edit as HTML，敲个空格回车：如果子树位置瞬间跳变，说明原始嵌套不合法
- 禁用所有 CSS 后检查布局：某块突然塌陷或错位，大概率是父容器被意外截断（如
<div><p>文字</p></div>导致<div> 提前闭合） <p>执行这行代码能快速揪出所有没爹的元素：<code>document.querySelectorAll('*').forEach(el => {if(!el.parentElement) console.log('孤立元素:', el) })。常见来源包括：<ul></ul>里直接塞<div>、<code><table> 里漏了 <code><tr>、<code><p></p>里放<h2></h2>。W3C Validator 才是定位首个嵌套错误的唯一准绳
粘贴 HTML 片段到
validator.w3.org，选 “Validate by Input”。它不看渲染结果，只按规范逐条比对内容模型（content model）。例如报错
Element div not allowed as child of element p，就明确告诉你：别在<p></p>里写<div>，必须改。优先修第一条 Error，后面很多 Warning 往往是连锁反应。 <p>别忽略这类提示：<code>Element img is not closed。自闭合标签写成<img alt="HTML解析阶段对非法嵌套标签引发的DOM树结构错位排查实战" >或<img alt="HTML解析阶段对非法嵌套标签引发的DOM树结构错位排查实战" >都行，但写成<img alt="HTML解析阶段对非法嵌套标签引发的DOM树结构错位排查实战" >就违法，会导致后续所有层级偏移——验证器会标出，浏览器却只静默纠错。innerHTML += 是结构错位的高危操作
innerHTML +=看似方便，实则危险。每次赋值都是独立解析，不保留上一次状态。比如先写：
el.innerHTML = '<p>开始'</p>，DOM 中并没有一个“半开”的<p></p>；它被解析为<p>开始</p>（自动补闭合）。再执行：
'，相当于解析新字符串el.innerHTML += '结束'<p>开始</p>结束'，第二个因无匹配起始标签被忽略，最终得到：<p>开始</p>结束。需要流式拼接时：
- 先在 JS 字符串变量里累积完整结构，最后一次性写入
innerHTML - 更安全的做法是用
insertAdjacentHTML('beforeend', ...)或DocumentFragment
真正难的不是发现错位，而是接受：你写的 HTML 和浏览器生成的 DOM 是两套东西。靠肉眼数标签、靠 CSS 调样式、靠 JS 强行 patch，都绕不开这个前提——必须回到规范本身去修正嵌套逻辑。
- 先在 JS 字符串变量里累积完整结构，最后一次性写入
