在 Web 开发中，BOM（浏览器对象模型）和 DOM（文档对象模型）都是非常重要的概念。BOM 和 DOM 作为 Web 应用程序中最核心的对象模型之一，它们的区别可能并不明显，本文将详细讲解 BOM 与 DOM 的区别分析。
BOM 是浏览器对象模型的缩写，是 JavaScript 和浏览器之间的接口，提供了一组对象，用于浏览器窗口的交互，包括：浏览器窗口本身、地址栏、前进后退按钮、历史记录等等。
BOM 组件不是标准的 W3C 规范，并且每个浏览器的实现并不相同。
DOM 是文档对象模型的缩写，它是 W3C 规范中定义的一个 API，它是用来操作 HTML 和 XML 文档的标准 API，将文档标记为对象的集合，使得 JavaScript 能够在文档节点上做出动态变化。每个网页都是一个文档对象模型，它包括了 HTML 元素、属性、文本等等。
下面是 BOM 和 DOM 的区别：
对象类型不同
BOM 对象主要包括 Window、Navigator、Location、History 等全局对象，而 DOM 则包括 Document、Element、Attribute、Text 等 Html 元素对象。
常用性不同
BOM 对象常用于浏览器窗口的操作，例如打开新的浏览器窗口、调整窗口大小等操作。DOM 对象则主要用于 HTML 元素的操作，例如修改 HTML 元素的属性、内容、样式等。
规范不同
BOM 不是 W3C 规范中的一部分。而 DOM 则是 W3C 规范中的一部分，支持跨平台和跨语言的应用。
Window 和 Document 对象是 BOM 和 DOM 中最重要的对象之一，它们具有不同的作用和方法。下面是 window 对象和 document 对象的一些区别：
| 对象 | window | document |
|---|---|---|
| 作用 | 作为全局对象，控制浏览器窗口的属性和方法 | 表示页面的 DOM 树，提供页面元素的访问和操作 |
| 使用方法 | 全局使用，无需实例化 | document 对象是 Window 对象的属性，通过 window.document 使用 |
| 对象属性 | top、location、navigator、history、alert、setInterval | body、title、forms、anchors、links、images、forms 等 |
| 错误处理 | window.onerror 方法用于处理 JS 错误 | document.onerror 方法用于处理 css 错误 |
| 操作 iframe | window.frames 能够访问和操作 iframe | 不支持操作 iframe |
当通过 JavaScript 获取屏幕分辨率时，使用 window.screen 对象；而获取文档尺寸时，使用 document.documentElement 或 document.body 对象。
//获取屏幕分辨率
console.log("屏幕宽度:" + window.screen.width + " px");
console.log("屏幕高度:" + window.screen.height + " px");
//获取文档尺寸
console.log("文档宽度:" + document.documentElement.clientWidth + " px");
console.log("文档高度:" + document.documentElement.clientHeight + " px");
BOM 和 DOM 都是 Web 开发中非常重要的对象模型，它们不同的区别在于对象类型、常用性、规范等方面。在编写 JavaScript 代码时，对 BOM 和 DOM 的灵活运用能够使代码更加高效、简洁。
本文链接：http://task.lmcjl.com/news/977.html