DOM 和 BOM 的区别

问题

什么是 DOM 和 BOM？它们有什么区别？

解答

DOM（Document Object Model）

DOM 是文档对象模型，用于表示和操作 HTML 和 XML 文档。它将文档中的每个组件（元素、属性、文本等）都看作对象，通过 JavaScript 可以动态修改页面的内容、结构和样式。

DOM 以树状结构组织文档，根节点是 document 对象，代表整个文档。

// 获取元素
const element = document.getElementById('app');

// 修改内容
element.textContent = 'Hello World';

// 修改样式
element.style.color = 'red';

// 创建新元素
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

BOM（Browser Object Model）

BOM 是浏览器对象模型，用于访问和控制浏览器窗口及其组件。核心对象是 window，它是 JavaScript 的全局对象，代表浏览器窗口。

BOM 提供的主要对象包括：

// window - 浏览器窗口
window.open('https://example.com');
window.alert('提示信息');

// navigator - 浏览器信息
console.log(navigator.userAgent);

// location - URL 信息
location.href = 'https://example.com';
console.log(location.pathname);

// history - 浏览历史
history.back();
history.forward();

// screen - 屏幕信息
console.log(screen.width, screen.height);

主要区别

DOM 专注于文档内容的操作，BOM 专注于浏览器功能的控制。在实际开发中，两者通常配合使用来完成页面交互、导航控制、事件处理等任务。

关键点

• DOM 操作文档内容，根对象是 document，用于访问和修改页面元素
• BOM 控制浏览器功能，核心对象是 window，是 JavaScript 的全局对象
• BOM 包含 navigator、location、history、screen 等对象
• DOM 是 W3C 标准，BOM 没有统一标准，各浏览器实现可能有差异