DOM Tree (文档对象模型树)

DOM Tree 是 DOM 节点按照父子关系组织起来的树状结构。

示例

<body>
  <main>
    <h1>Hello</h1>
    <button>Save</button>
  </main>
</body>

浏览器会把它理解为：

document
└── html
    └── body
        └── main
            ├── h1
            └── button

学习重点

• 父节点 (parent node)、子节点 (child node)、兄弟节点 (sibling node)。
• 元素节点、文本节点、属性。
• 事件冒泡 (Event Bubbling)：事件会沿着 DOM Tree 向上传递。

个人理解

DOM Tree 是前端页面的“骨架”。CSS 负责视觉表现，JavaScript 负责行为变化，但它们都围绕这棵树工作。

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Web