DOM 核心数据结构

在MDN开发者社区看到这样一张图片。

1.jpg

这张图代表了 DOM 的核心，核心构造函数 和 核心数据类型。 但还有一些感觉没有画全，所以自己去补全了一些数据类型。

'EventTarget:Node:Element:HTMLElement:HTMLBodyElement',
'Node:Document:HTMLDocument',
'Element:HTMLElement:HTMLDivElement',
'HTMLElement:HTMLSpanElement',
'HTMLElement:span,p,input,form...',
'Document:extend:GlobalEventHandlers',
'Document:extend:ParentNode',
'Document:include:DocumentOrShadowRoot'

DOM 核心依赖图

在MDN 的基础上新增了构造函数。

2.png

EventTarget

在最顶级的构造函数是 EventTarget，所有DOM元素都会继承该构造函数。可以对DOM元素事件进行新增或删除。

EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。

MDN EventTarget 文档

3.png

Node

注意：该Node 不是js Node 环境。

这个是DOM 最最核心的构造函数，实例中的API 可以对 DOM 元素进行操作 增删改查。

Node 是一个接口，许多 DOM API 对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；

MDN Node文档

4.png

Element

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

MDN Element文档

HTMLElement

MDN HTMLElement 文档

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.

从父元素Element 继承方法.

5.png

Document

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。

构造器 Document() 创建一个新的 Document 对象。

属性

6.png

方法

7.png

事件

8.png