打通 DOM 的设计架构

前两节回顾：

1、我是一颗树 · DOM

2、回到工位“我”悟出了 DOM 设计的精华

进入了 window 的办公室后，我看她正听着音乐：

见我进来后，她摘掉耳机，并问道：“DOM 最近进展如何？”。

我说道：“关于我以后的工作，大方向上我还有一些疑问需要向你请教一下”。

window 说道：“那我就给你说说你以后需要做的工作，我给你提供一个大的方向，至于细节还需要你自己来考虑。你主要的工作是三块：第一、事件，你能够处理用户的事件，比如按钮点击；第二、节点的操作，比如插入一个新的节点，删除节点；第三、修改样式，比如我前面给你举得修改背景颜色的例子”。

走出 window 的办公室，回到工位以后，我想了想，既然我主要有三个主要的任务，那么我把这些任务通过三个对象来管理。EventTarget 负责处理事件；Node 负责处理节点操作；Element 代表元素，负责处理一些样式的修改。我画了一张图：

随后，我便继续开始设计 getElementById('id') 这个功能。当开发者调用 getElementById 时返回的结果是一个 Element 对象？这样做会不会给后续带来问题？我心中不断反问自己。

正当我思考如何设计一个元素 Element 的时候，一位哥们从我的身旁走过，只见他衣服上写着“SVG”。

他的出现打乱了我的思绪，我好奇地查了下 SVG。原来他的主要工作是创建矢量图，可嵌入到 HTML 中用来表示图。开发者也会通过我来访问到他的一些信息。

我又看到了一段开发者的代码：

代码中包含有 h1、div、p、img 这样的标签，每一种标签又包含了不同的属性。这些标签可以通过 Element 来表示，但是他们却有各自不同的功能。那只能通过不同对象来表示不同的标签，比如 HTMLDivElement 专门来负责管理所有的 div 标签，HTMLImageElement 来管理所有的 img 标签。

我的思路一下打开了，我便画了下面一张草图：

整体架构图已经确定，下面唯一要确定的是各个对象需要负责的事情。

HTMLElement 的架构图：

Element 的架构图：

Node 的架构图：

EventTarget 的架构图：

「公众号素燕注：EventTarget -> Node -> Element -> HTMLElement -> HTMLDivElement 形成了继承体系，不同的对象负责不同的事情。关于这些对象还有很多属性和方法，上图中只列出了部分，可以通过 MDN 了解更多」

花了一上午的时间总算画完了基本的架构图，我把开发者的代码转换一下，结构如下：

画完整个架构图后，我对自己的整体思路还是满意，决定下班前找 window 汇报一下。

我来到 window 的办公室门口，敲了敲门。window 轻轻说了声：“请进”。

本节完！

公众号素燕注：本节内容主要讲了 DOM 的设计，按照继承体系来说明，EventTarget -> Node -> Element -> HTMLElement -> HTMLDivElement 这是 div 标签一条完整的继承链。

有人可能分不清 DOM 和 document 的区别。浏览器中的渲染引擎是无法理解 HTML 的，需要把 HTML 通过转换成渲染引擎能够理解的结构，而这种结构就是 DOM，一种树状结构。而 document 就是一个浏览器中的对象，通过这个对象可以操作 DOM 结构。

在 HTML 中，通常把代码的 div、p、span 这些称为标签，是静态的，在内存中的标签我们通常称为元素。

---

推荐阅读：

关于晋升的一点思考
你可能不需要一个 UI 设计师
上次忘记推荐这本 JavaScript 书籍了