😭从架构角度理解DOM

一.写在前面

大家好我是一溪风月一名🐣程序员，每天做梦都想要成为一名像wangpeng一样优秀的人物，我们都知道到JavaScript包含三部分，分别是ECMAScript，DOM，BOM，DOM虽然在目前的开发中不经常被直接使用，但是其实框架的底层还是对DOM的操作，所以如果你想要进阶，想要完全的理解和精通JavaScript，DOM的知识也需要重视，在大多数同学眼中DOM就是简单的API，DOM操作就是各种API的调用，而对DOM的设计完全不了解，这就造成了许多API记了一段时间就忘记了，在下次需要进行DOM的操作的时候仍然需要重新学习，循环往复，既浪费了时间自信心也备受打击，其实DOM的整体设计真的不复杂，但是设计思想值得我们学习，如果这篇文章，我们不会对DOM的API进行列举，而是让你从架构上理解DOM，相信在你真正理解了DOM之后任何API都不许要死记硬背，而是在使用的时候具体去查询即可，如果你觉的对你有帮助可以动手点一个小小的👍如果你对JavaScript相关的硬核知识比较感兴趣，可以关注TypeScript专栏，后续会不断的更新TypeScript和JavaScript相关内容，更有其他专栏会在后续分时段更新。

二.什么是DOM

DOM的全称是文档对象模型，它将页面中的内容表示成了可以修改的对象，在前端的页面中，不只有html body除此之外还有很多其他子元素，这些元素在被抽象成DOM的时候会形成一个DOM-Tree那么DOM的本质是什么哪？我们知道API的全称是应用程序接口，如果你接触过混合H5开发你会发现客户端可以给H5提供很多客户端方法，如果你编写过小程序你会发现小程序也提供了很多可以供我们调用的方法，其实上面两种都是不同宿主环境提供给我们的应用程序接口，当然DOM和他们一样，DOM是浏览器提供给我们的一套应用程序接口，这些应用程序接口的作用就是让我们与宿主环境进行交互，是联结HTML元素和JavaScript的桥梁。

二.DOM继承关系图

在真正的开始讲解DOM-API的时候我们需要整体的理解一下DOM的架构，在学习这部分内容之前如果你完全不了解面向对象的知识，那么我建议你先简单的学习一下，因为DOM的整体设计是基于继承的，关系图如下：

三.如何理解DOM

可能单纯的从DOM的架构图我们很难看出来DOM究竟是什么，那么我们来创建一个HTML文档然后针对具体的HTML文档来讲解上述关系图到底讲解了什么样的内容。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div>文档中的内容</div>
    <!-- 此文档的注释内容 -->
  </body>
</html>

在如上的文档中所有的元素其实在都会被浏览器抽象成一个DOM节点，也就是DOM树的一部分，上述文档中的元素，内容，注释都会被抽象成不同的对象。

举个简单的例子，就像你玩植物大战僵尸的时候的向日葵，倭瓜等不同的道具，而DOM中的注释，内容在程序实现层面其实和向日葵和倭瓜的实现思路其实是一样的，游戏的设计者在设计游戏的时候需要首先将具体的对象抽象成向日葵类，倭瓜类然后当你的阳光充足的时候进行拖放向日葵的时候其实所做的操作就是，实例化了一个向日葵的对象，拖放两个就是对应的实例化两个。

DOM的设计者也是这样设计的，在一个文档中的注释 节点 元素也是这个文档中的一个个对象，从整体架构设计的时候也会抽象成对应的类，这样的好处有很多，方便代码的复用，方便对不同的API进行整合管理，代码变得更可控，比如上面的DOM继承关系图，在这个图中，首先最顶层的类是EventTarget类，然后Node类继承自EventTarget类，然后其余的是它的子类，比如Document，Element等等，继承自父类能够使用父类的方法，例如常见的li元素就会被抽象成HTMLLIElement类div元素就会被抽象成HTMLDIVElement类。

四.总结与DOM-API

这篇文章我们以简短的篇幅从DOM的架构设计上进行了DOM的理解，DOM的设计不复杂，但是很巧妙，它是使用面向对象的思想来设计的，这样的好处是方便代码的复用，增加对代码的掌控力，当我们理解这些架构层面的内容的时候我们根本不需要再去死记硬背API了，当需要的时候我们直接去查询API即可：developer.mozilla.org/zh-CN/docs/...