JavaScript BOM与DOM API区别解析

JavaScript中的BOM（Browser Object Model）和DOM（Document Object Model）是用于不同目的的API，以下是它们的核心区别和用途的总结：

BOM（浏览器对象模型）

用途：与浏览器窗口交互，控制浏览器行为，而非页面内容。
核心对象：

• **window**：顶层对象，代表浏览器窗口。
  • 方法：open(), close(), alert(), setTimeout()
  • 属性：innerWidth, innerHeight, location
• **navigator**：提供浏览器信息（如用户代理）。
  • 属性：userAgent, platform
• **location**：管理当前URL。
  • 方法：reload(), assign()
  • 属性：href, search
• **history**：操作浏览历史。
  • 方法：back(), pushState()
• **screen**：获取屏幕信息。
  • 属性：width, height

特点：

• 无统一标准，浏览器实现可能不同。
• 常用于操作浏览器窗口、导航、定时器等。

DOM（文档对象模型）

用途：操作HTML/XML文档的结构和内容。
核心对象：

• **document**：页面入口，提供访问和修改元素的API。
  • 方法：getElementById(), querySelector(), createElement()
  • 事件：click, keydown, submit
• 元素节点（如div, p）：通过DOM方法操作属性、样式和内容。
  • 属性：innerHTML, className
  • 方法：appendChild(), setAttribute()

特点：

• W3C标准，跨浏览器兼容性较好。
• 用于动态更新内容、处理事件、修改样式等。

关键区别

协同工作示例

1. 调整布局响应窗口变化：

   window.addEventListener('resize', () => {
     const width = window.innerWidth; // BOM
     document.getElementById('container').style.width = `${width}px`; // DOM
   });
   

2. 单页应用导航：

   // BOM：管理历史记录
   history.pushState({ page: 1 }, 'Page 1', '/page1');
   
   // DOM：动态更新内容
   document.getElementById('content').innerHTML = '<h1>New Page</h1>';
   

常见混淆点

• window对象：既是BOM的入口，也是DOM的全局宿主（如window.document）。
• **document.cookie**：属于DOM，但操作与浏览器（BOM）行为相关。
• 事件：window.onload（BOM）与element.onclick（DOM）。

通过区分BOM和DOM的职责，开发者能更高效地控制浏览器行为和页面内容，构建交互丰富的Web应用。