用chrome devtools直观确认dom层级：右键元素→“reveal in elements panel”，逐级展开父节点观察真实父子关系；或在console运行document.queryselector('selector').parentnode验证，注意#text节点也计入层级。
怎么用浏览器 DevTools 直观确认元素的 DOM 层级
浏览器不解析缩进，但 DevTools 的 Elements 面板默认展示的是**浏览器实际构建的 DOM 树**，这才是真实层级。你看到的嵌套结构，就是 document 对象里节点的父子关系。
关键操作不是“看源码缩进”，而是：右键任意元素 → “Reveal in Elements panel” → 展开其父节点，逐级向上数 parentNode；或在 Console 中运行 document.querySelector('your-selector').parentNode，直接打印上一级。
- 注意：Elements 面板里出现的
#text节点（比如换行、空格）也是真实子节点，会占用层级计数 - 若某
<div> 看似是顶层，但展开后发现它上面有匿名 <code>#text或被自动包裹进，说明源码中存在非法前置内容（如注释/空格写在外） - 使用
element.children可过滤掉文本节点，只看元素级子节点；而element.childNodes会包含所有类型节点 -
main标签必须是的直接子元素，否则会被浏览器移到别处，DOM 结构与源码不一致 - 避免用过度依赖深度的 selector，如
div div div p；改用语义化 class 或data-属性锚定，更稳定
为什么 querySelector 选不到预期的“第 N 层”元素
常见原因是 selector 写法隐含了层级假设，但实际 DOM 被浏览器静默修正过。例如写 body > main > section > h2，结果返回 null——未必是 selector 错，很可能是 <main></main> 并非 的直接子元素（比如被 CMS 框架插了个 <div id="app"> 包裹了）。
<ul>
<li>先用 <code>document.body.children 查看 下真实的第一层子元素有哪些，确认 <main></main> 是否真的在 index 0
用 JavaScript 手动计算一个元素的 DOM 深度
所谓“层级”在代码里就是从该元素向上遍历到 document 的路径长度。最简方式是递归统计 parentNode：
function getDepth(el) {
if (!el || el === document) return 0;
return 1 + getDepth(el.parentNode);
}
但要注意：这个值反映的是**节点树深度**，不是视觉渲染层（Layers）或 CSS 作用域深度。
- 返回值 ≥ 7 时，Layer 面板容易出现碎片化小方块，需警惕 DOM 过深
- 若对某个
<img>调用此函数，结果为 1，说明它被错误地放在了下——<img>是自闭合标签，绝不可能是顶层元素，必属某容器 - 不要用
offsetParent替代parentNode计算层级，前者受 CSS 定位影响，可能跳过中间多层
哪些 HTML 结构会导致层级“看起来对、实际错”
浏览器会自动修复非法嵌套，导致 DOM 层级和源码缩进严重脱节。最典型的是把块级元素塞进行内容器，或在 里写可见标签。
-
<p></p> <div>xxx</div>：浏览器会把<div> 移出 <code><p></p>，变成兄弟节点，DOM 深度突变 -
<p>test</p>：整个<p></p>会被移到开头，原位置只剩一个空 -
<main><section><h3>A</h3></section></main>：合法，<h3></h3>的大纲层级为 3；但若写成<main><div><h3>A</h3></div></main>，<h3></h3>就会被判为跳级，Accessibility 面板报错
真正决定层级的不是你怎么写的，而是浏览器最终生成的那棵 DOM 树——它藏在 Elements 面板里，也藏在 document 对象的内存结构中。任何脱离这个事实的“层级判断”，都只是纸上谈兵。
