ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、为啥需要dom 在JS(javascript)还没诞生的远古时代,不需要对html文档内容进行修改,浏览器直接对文档内容单次解析并呈现,就不再关心html文档了,因为它不可能发生变化,那时候是没有DOM的。 JS出现后,JS可能会修改html文档,而且浏览器需要实时反映这种修改。 所以,浏览器在解析html文档之后,还要跟踪html文档的变化。设想,没有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;