Skip to main content

DOM和BOM的区别

在浏览器中运行的JavaScript可以认为由三部分组成:ECMAScript描述了该语言的语法和基本对象,DOM文档对象模型描述了处理网页内容的方法和接口,BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。

DOM

  • DOMDocument Object Model的缩写,即文档对象模型。
  • DOMW3C的标准。
  • DOM最根本对象是document,即window.document

DOM全称是Document Object Model即文档对象模型,是针对XML的基于树的API,描述了处理网页内容的方法和接口,是HTMLXMLAPIDOM把整个页面规划成由节点层级构成的文档。DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,其关注的是网页本身的内容,由于是相对独立于浏览器的,所以可以制定标准。
DOM定义了Node等对象做为这种实现的基础,就是说为了能以编程的方法操作这个HTML的内容,例如添加元素、修改元素、删除元素等,我们把这个HTML结构看做一个对象树DOM树,其本身和里面的所有东西例如<div></div>这些标签都看做一个对象,每个对象都叫做一个节点Node,节点可以理解为DOM中所有Object的父类。

BOM

  • BOMBrowser Object Model的缩写,即浏览器对象模型。
  • BOM没有相关标准。
  • BOM的最根本对象是window

BOMBrowser Object Model即浏览器对象模型,DOM是为了操作文档出现的接口,而BOM就是为了控制浏览器的行为而出现的接口,例如跳转页面、前进、后退、书签等等,程序还可能需要获取屏幕的大小之类的参数,所以BOM就是为了解决这些事情出现的接口,例如我们要让浏览器跳转到另一个页面就需要Location对象。
由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式,所以对于上面说的功能,不同的浏览器的实现功能所需要的JavaScript代码可能不相同。虽然BOM没有一套标准,但是各个浏览器的常用功能的JavaScript代码还是大同小异的,对于常用的功能实际上已经有默认的标准了,所以不用过于担心浏览器兼容问题,不是每个浏览器都有自己的BOM,也不需要为每个浏览器都学习一套BOM,只是个别浏览器会有新增的功能会在BOM上体现出来。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.zhihu.com/question/20724662
https://juejin.cn/post/6844903939008102413
https://blog.csdn.net/xiao__gui/article/details/8315148