深圳市福田建设股份有限公司网站上海市工程咨询协会

DOM（文档对象模型）和 BOM（浏览器对象模型）是前端开发中的两个重要概念，它们的主要区别如下：

1. 定义与作用

• DOM（文档对象模型）
  是针对 HTML 和 XML 文档的 API，将文档解析为树形结构（由节点和对象组成），允许程序动态访问和修改文档内容、结构和样式。
  示例：通过document.getElementById()获取元素并修改其内容。

• BOM（浏览器对象模型）
  是浏览器提供的操作浏览器窗口的 API 集合，用于与浏览器窗口交互，如导航、窗口控制、历史记录等。
  示例：使用window.location.href跳转页面，或window.alert()显示弹窗。

2. 核心对象

• DOM：核心是document对象，表示整个文档。
  常见对象：Element、Node、Text等。

• BOM：核心是window对象，表示浏览器窗口。
  常见对象：location、navigator、screen、history等。

3. 标准化程度

• DOM：由 W3C 标准化，所有浏览器遵循相同规范。
  级别：DOM Level 1/2/3/4（如 ES6 的 DOM API）。

• BOM：无统一标准（W3C 未全面规范），不同浏览器实现存在差异（如早期 IE 的ActiveX对象）。

4. 常见应用场景

• DOM 操作：

  • 修改元素内容或样式（如element.style.color = 'red'）。
  • 添加或删除元素（如document.createElement()）。
  • 事件监听（如element.addEventListener()）。

• BOM 操作：

  • 页面跳转（window.location.href = 'https://example.com'）。
  • 打开新窗口（window.open()）。
  • 获取浏览器信息（navigator.userAgent）。

5. 关系

• window是全局对象，包含document（DOM 的入口）。
• 示例：

  javascript

  window.document.getElementById('demo'); // 等价于 document.getElementById('demo')
  

总结对比表

特性	DOM	BOM
核心对象	document	window
作用	操作文档内容、结构和样式	操作浏览器窗口和环境
标准化	W3C 标准	无统一标准
示例方法	getElementById、appendChild	location.href、alert()

理解两者差异有助于更高效地开发前端应用：使用 DOM 操作文档内容，使用 BOM 处理浏览器窗口交互。