​ DOM操作页面，BOM操作浏览器。听到这句话时，我感觉自己的基础不是很扎实。脑海里复现的问题竟然是DOM是什么？BOM是什么？

为什么COM能操作页面？为什么BOM能操作浏览器？他们之间有什么共同点？有什么不同点呢？既然问题出来了，那我们就一一百度解决！

DOM是什么？

​ DOM全称Document Object Model，即文档对象模型。我理解的DOM是一个接口，它接在HTML代码中。就像document.getElementById(‘xxx’)一样，它把Id为“myBtn”的节点“引用”到了这里。就相当于API接口，这样用脚本（JS）控制Web界面就很方便。（观点浅薄，请自行深入）

BOM是什么？

​ BOM全称Browser Object Model，即浏览器对象模型。它也是接口，它的口接在全局对象中。也就是可以网页中，我们可以通过BOM接口加上一些动作来对浏览器进行控制。

为什么COM能操作页面？为什么BOM能操作浏览器？

​ 因为它们都是各自对象模型的接口（分别对应：文档对象模型，浏览器对象模型）。就像一个是手机的屏幕，一个是汽车的方向盘。都能都过对应的那一个点去操控各自的模型。

他们之间有什么共同点？有什么不同点呢？

浅谈

  • 不同点：各自操作不同的模型。

  • 相同点：你中有我，我中有你。

深论

javascript由三部分组成：ECMAScript,DOM,BOM组成。

1
2
3
DOM是W3C的标准；[所有浏览器公共遵守的标准]
BOM是各个浏览器厂商根据DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别，实现方式不同]
window是BOM对象，而非js对象。

​ DOM（文档对象模型）是HTML和XML的应用程序接口（API）。
​ BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都被看做BOM的一部分。这些扩展包括：

1
2
3
4
5
6
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供web浏览器详细信息的定位对象
提供用户品目分辨率详细信息的屏幕对象
对cookie的支持
IE扩展了BOM，加入了ActiveXObject类，可以通过JavaScript实例化Activex对象

​ javascript是通过访问BOM对象来访问、控制、修改客户端（浏览器），由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用winodw对象的document属性。

​ 通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中DOM包含:window

分类

  • window对象包含属性：document、location、navigater、screen、history、frames。