嵌套、父子、兄弟：读懂页面结构树 | 星雨笔录

嵌套： 元素内可包含其他元素，形成树形结构。 父子： 直接包含与被包含的关系。 兄弟： 拥有同一个直接父元素。 祖先 / 后代： 沿包含关系向上 / 向下查找，包含直接父子。

最小示例：

<div>
  <p>我是 div 的子元素</p>
  <span>我和 p 是兄弟元素</span>
</div>

学完能做： 识别父子与兄弟节点，画出简单嵌套结构。