JS：DOM 的类型层级

2025/03/23

@BB

DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析为树状结构的对象模型。DOM 类型层级是指 DOM 中各个对象之间的继承关系和层级结构。了解 DOM 类型层级有助于更好地理解 DOM 的操作和扩展。

DOM 类型层级图

以下是 DOM 类型层级的简化图示：

DOM 节点

DOM 构建文档对象树

浏览器渲染引擎构建 DOM 对象的树型结构简化图示：

对象结构

DOM 类型层级是 JavaScript 操作 DOM 的基础，DOM 一方面规定了方法属性接口的继承关系，一方面规定了构建文档时的树形结构，理解这两方面是理解 DOM 的关键

第一方面：规范定义的接口体系：

各个节点类型的接口定义（如 Node、Element、HTMLElement 等）
每个接口的具体属性和方法
接口之间的继承关系（如 HTMLDivElement → HTMLElement → Element → Node → EventTarget）

第二方面：运行时构建文档对象树：

由这些接口的具体实例组成的树形结构
其组织结构与文档的实际标记结构相对应
每个节点都是某个接口的具体实现

以下是 DOM 类型的主要层级结构：

1. 顶层：`EventTarget`

EventTarget 是所有 DOM 节点的基类。
提供了事件监听和派发的能力（如 addEventListener、removeEventListener、dispatchEvent）。
继承关系：
- 所有 DOM 节点都继承自 EventTarget。

2. `Node`

Node 是 DOM 中所有节点的基类。
提供了节点操作的基本属性和方法（如 parentNode、childNodes、appendChild、removeChild 等）。
继承关系：
- EventTarget → Node
常见子类：
- Element（元素节点）
- CharaterData（抽象类，提供Text和Comment节点‌）
  - Text（文本节点）
  - Comment（注释节点）
- Document（文档节点）
- DocumentFragment（文档片段节点）

3. `Element`

Element 是所有 HTML 元素节点的基类。
提供了元素操作的方法和属性（如 getAttribute、setAttribute、classList、children 等）。
继承关系：
- EventTarget → Node → Element
常见子类：
- HTMLElement（HTML 元素）
- SVGElement（SVG 元素）

4. `HTMLElement`

HTMLElement 是所有 HTML 元素的基类。
提供了 HTML 元素的通用属性和方法（如 innerHTML、style、click() 等）。
继承关系：
- EventTarget → Node → Element → HTMLElement
常见子类：
- HTMLDivElement（<div> 元素）
- HTMLSpanElement（<span> 元素）
- HTMLInputElement（<input> 元素）
- HTMLButtonElement（<button> 元素）
- 其他所有 HTML 元素类型。

5. `Document`

Document 表示整个 HTML 文档。
提供了文档级别的操作方法和属性（如 getElementById、querySelector、createElement 等）。
继承关系：
- EventTarget → Node → Document
常见子类：
- HTMLDocument（HTML 文档）

6. `DocumentFragment`

DocumentFragment 是一个轻量级的文档片段，用于高效地操作和插入多个节点。
继承关系：
- EventTarget → Node → DocumentFragment

7. 其他重要类型

Text：表示文本节点。
- 继承关系：EventTarget → Node → Text
Comment：表示注释节点。
- 继承关系：EventTarget → Node → Comment
Attr：表示元素的属性节点。
- 继承关系：EventTarget → Node → Attr

总结：

EventTarget 是所有 DOM 节点的基类，提供事件处理能力。
Node 是所有节点的基类，提供节点操作的基本方法。
Element 是所有元素节点的基类。
HTMLElement 是所有 HTML 元素的基类。
Document 表示整个文档。
其他类型（如 Text、Comment、DocumentFragment 等）用于处理特定类型的节点。