HTML解析错误不会在console报错，浏览器静默纠错不抛异常；真正定位结构问题须用W3C Validator验证原始代码，而非依赖Elements面板展示的修正后DOM。
DOM异常本身不暴露HTML语法错误
浏览器根本不会把非法嵌套、标签未闭合这类问题当作“异常”抛出——DOMException只响应明确违反 DOM API 规范的操作（比如往 document 上 appendChild），而 HTML 解析阶段的静默修正（如 <p></p>
<div></div>
TypeError: Cannot read property 'style' of null，往往只是 DOM 树被重排后，JS 查不到目标元素的**结果**，不是根源。
真正能定位 HTML 结构问题的只有 W3C Validator
别依赖 DevTools 的 Elements 面板判断结构对不对，它展示的是浏览器修正后的 DOM。要查原始 HTML 是否合法，必须用 validator.w3.org：
- 粘贴 HTML 片段 → 选 “Validate by Input” → 看第一条
Error（不是 Warning） - 典型报错如
Element div not allowed as child of element p，直接对应到源码位置 - 修复第一个 Error 后，大量后续 Warning 常自动消失——这是连锁修正效应
- 忽略
Element img is not closed这类提示会引发层级偏移，验证器标出，浏览器却只沉默纠错
运行时检测孤立节点可暴露非法嵌套后果
浏览器把非法嵌套的元素“踢出”父容器后，它们变成没 parentElement 的孤儿节点，CSS 失效、选择器失效、事件委托失效，但不报错。执行这行代码能快速揪出它们：
document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el); });
常见来源包括：<ul></ul> 里直接塞 <div>、<code><table> 里漏写 <code><tr>、<code><p></p> 里放 <h2></h2>。这些节点在 Elements 面板里通常显示为灰色、半透明、缩进突兀。
立即学习“前端免费学习笔记（深入）”；
jsdom + VirtualConsole 可捕获渲染期 JS 错误，但不解决 HTML 本身
在 Node.js 环境中用 jsdom 模拟页面时，VirtualConsole 能监听 error、warn 等事件，帮你捕获脚本执行失败或资源加载失败：
const { JSDOM, VirtualConsole } = require('jsdom');
const virtualConsole = new VirtualConsole();
virtualConsole.on('error', message => console.error('JS 执行错误:', message));
const dom = new JSDOM(htmlString, { virtualConsole, runScripts: 'dangerously' });
但它无法告诉你 <p><span><div></div></span></p> 违反了 phrasing content 规则——这不属于 JS 执行上下文，而是 HTML 解析层的事。想覆盖这一环，必须在构建流程里接入 html-validate CLI，或开发期用 VS Code 的 vscode-htmlhint 插件实时提示。
