DOM 和 BOM 的区别

问题

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

解答

DOM（Document Object Model）

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

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

// 获取元素
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// 修改内容
element.textContent = '新内容';
element.innerHTML = '<span>HTML 内容</span>';

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

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

BOM（Browser Object Model）

BOM 是表示浏览器窗口及其组件的对象模型。它提供了一组对象，用于访问和控制浏览器窗口、地址栏、历史记录等。

核心对象是 window，它是浏览器窗口的表示，也是 JavaScript 的全局对象。

// window 对象（可省略 window 前缀）
window.alert('提示信息');
console.log(window.innerWidth); // 窗口宽度

// location 对象 - URL 信息
console.log(location.href); // 当前 URL
location.reload(); // 刷新页面
location.href = 'https://example.com'; // 跳转

// history 对象 - 浏览历史
history.back(); // 后退
history.forward(); // 前进

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

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

关键点

• DOM 用于操作文档内容，BOM 用于控制浏览器行为
• DOM 的核心是 document 对象，BOM 的核心是 window 对象
• DOM 是 W3C 标准，BOM 没有统一标准（各浏览器实现可能有差异）
• 实际开发中通常同时使用 DOM 和 BOM 来完成页面交互和浏览器控制