阅读 132

面试官:什么是DOM?为什么需要DOM?

前言

写这些内容,完全是因为个人在了解DOM的时候,发现很多文档或者对DOM认识较深的人,在解释DOM这个概念时简洁的用专业术语堆砌,新手完全听不懂,更别提理解了。大部分人学了一系列DOM操作,却对DOM这个概念云里雾里。网上其它解释,大多数是给了一个DOM树,然后告诉你,这就是DOM。或者大摆DOM操作,说一些更让人迷惑的概念。 下面为个人理解,如果错漏,欢迎纠正或讨论。希望对新人有帮助。

正文

很多文档的解释,大概像这样:

DOM, (Document Object Model, 文档对象模型)是文档内容(HTML或XML)在编程语言上的抽象模型,它建模了文档的内容和结构,并提供给编程语言一套完整的操纵文档的API。

这句话本身十分正确,但是对刚接触这个概念的人来说,难以理解。下面我说说为什么需要DOM,并且从中体会DOM是什么。

在JS(javascript)还没诞生的远古时代,不需要对文档内容进行修改,浏览器直接对文档内容单次解析并呈现,就不再关心文档了,因为它不可能发生变化,那时候是没有DOM的。

JS出现后,JS可能会修改文档,而且浏览器需要实时反映这种修改。

所以,浏览器在解析文档之后,还要跟踪文档的变化。设想,没有DOM,JS应该直接修改文档的字符串内容,这将是一个大灾难。

  1. 首先,在JS中处理庞大的html文本,必然繁琐且错漏百出,没人愿意这么做。

  2. 即使,在JS这方面,你真的很厉害,完全胜任了这个工作,浏览器表示它不干了,刚刚把一个大页面解析好,发现JS修改了它,可是根本无法知道修改了哪里,只能重新解析整个页面,即使这个修改只是添加了一个空格,页面内容根本没有发生变化,这种性能的浪费不言而喻。

  3. 再退一步,前面一切安好,在用户看来,每次修改文档,浏览器重新解析,页面必然一段时间白屏,解析时间快可能是闪屏,这种体验不如放弃修改页面。

以上三个理由告诉我们,需要一种便捷、高效、可跟踪的文档修改方式,这些就是DOM做的事。

  1. 在浏览器方面,浏览器首次解析文档时,把文档中的标签(文本等)解析成一个个节点,父元素与子元素(或文本)用线连接,整个文档最终形成一个称为DOM树的树形结构。浏览器再根据DOM树去呈现页面。浏览器会跟踪DOM树的变化,一旦DOM树变化,页面也会做出相应变化。

  2. 巧妙的是,DOM树在JS环境中也是存在的(JS执行引擎是浏览器的一部分),所以,在JS中,原本对文档的修改现在只需要修改DOM树和其中的节点就好了。DOM节点对象是普通的JS对象,有易于操作的方法和属性,这样,在JS操纵文档就好像操作对象一样方便快捷。而且,浏览器会知道你修改了哪个节点,这样,只需要重新渲染被修改影响的局部页面就好了(即发生回流重绘)。

后来,DOM组件发展成为一套不依托于浏览器和JS的独立规范,提供了一套完整的访问和修改文档的接口,这些API在浏览器中被广泛使用,不过,也支持python等其他。DOM标准由W3C维护,目前版本DOM 4

所以DOM这个名词应该有两层含义,第一个是根据文档建模出来的一个树形模型,即是DOM树,这是站在浏览器方面的看法。从编程语言来看,它提供了一套操纵文档的API。作为程序员,更多的理解是后者。