Java培训
美国上市Java培训机构

400-111-8989

热门课程

程序员总说的DOM到底是什么?

  • 发布:Java培训
  • 来源:java问答
  • 时间:2017-03-08 11:43

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

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

【程序员天天说的DOM到底是什么?】

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

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

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

【程序员天天说的DOM到底是什么?】

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

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

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

【程序员天天说的DOM到底是什么?】

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

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

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

预约申请免费试听课

上一篇:JDBC是什么?
下一篇:微服务:Java EE的拯救者还是掘墓人?
选择城市和中心
贵州省

广西省

海南省