大家好，有些词儿，程序员之间虽然天天说，彼此之间心照不宣，但是在面对一些非技术的产品同学的时候，对方却不一定能一下子就get到点。这个系列的文章就是为了解决这种尴尬的，理想的效果是，只要一提起这些词儿，你脑海中就会出现一幅图或者一段精妙的解释，那我们就成功了。

今天Java培训班讲解的词儿是DOM，是程序员里面最基础、最常用的一个东西。它的全称是文档对象模型(Document Object Model)，光看名字太抽象，简单解释一下。我们知道，一个网页，其实就是一个html文件，经过浏览器的解析，最终呈现在用户面前。html语言我们也讲过，是由很多标签组成的，像这样：

里面的head、body就是标签。这些标签不是随意摆放的，他们有自己的规则。首先它们是嵌套的，一层套一层，比如html套body，body又套p标签。其次，每一层，可以同时存在很多标签，比如head和body就是一层的，他们被外面的html套着。这样的结构很像我们电脑里的文件夹，「我的电脑」是最外面的一层，里面套着CDEF盘，每个盘里又有很多文件夹，文件夹里又有文件夹，最后才是很多具体的文件。

为什么要按照这种结构来组织呢?其实就是方便解析和查询。解析的时候，从外到里，循序渐进，好比按照图纸盖房子，先盖围墙，再盖走廊，最后才是卧室。查询的时候，会有一条明确的路线，比如D盘-->岛国文化交流-->影视作品-->苍老师.avi，这样一层一层的缩小范围，查找效率会非常高。

所以，浏览器在解析html文档的时候，会把每个标签抽象成代码里的对象，然后按照这种层次分明的结构组织起来，这就是文档对象模型，DOM了。画个图表示一下就是这样的：

这就是数据结构里典型的「树」了。所以大家经常说DOM树，其实是一个意思。浏览器在解析html的时候，会在它的内部构建这样一棵DOM树，然后按照这棵树上的层次顺序，依次来解析每个标签。标签解析完了，用户就看到了网页的内容。

但是，事情到这里还远远没有结束，因为还有javascript。浏览器解析完了html，然后就要开始解析html里的javascript代码了。我们知道，程序员可以通过javascript代码来实现一些动态的网页效果，比如去服务器拉取一段数据来展示，再比如说做一个酷炫的动画效果，这些，都还要用到DOM。

举个简单的例子，现在javascript想要在网页里显示一行字“this is from javascript”。要做的第一步，就是找到那个可以显示文字的标签。这是非常容易的，因为浏览器已经把DOM都交给javascript了。DOM里的对象，正好就是javascript语言里的对象。于是，通过下面的方法，javascript可以修改DOM树上的标签对象。

随着前端知识的深入，你会发现javascript操纵DOM是非常普遍事情。比如很多网页，一开始加载出来只是个架子，只有一个loading在转圈，只有等javascript从服务器上请求到真正的数据之后，操纵DOM来显示数据，才能看到内容，这就是典型的异步加载。再比如html5的游戏，里面的人物要随着手势或鼠标来运动，多半也是javascript操纵DOM改变元素的位置来实现的。可以说，有了DOM，才使得javascript在前端世界里几乎无所不能。

但是，有一点要注意，就是操纵DOM本身是一件效率非常低的事情。因为一个网页往往是很复杂的，浏览器构造出来的DOM树往往也是很庞大的，有的甚至有几千个节点。在这样庞大的一棵树上，进行频繁的改动，对浏览器尤其是移动浏览器来说是一个不小的工作量，稍一不注意就卡了。

有人就发明了一种便捷的方法，叫虚拟DOM。简单来说就是用javascript又模拟了一棵简单的DOM树，然后所有的DOM操作都在这上面演练，这个效率是很高的。等时机成熟的时候，再把虚拟DOM树和真正的浏览器的DOM树做对比，算出差异，一次性的去改变真正的DOM树，这个效率也很高。经过这两个步骤，从整体上大大提高了javascript操纵DOM树的效率。