JavaScript 中 DOM 和 BOM 的区分

什么是 DOM 和 BOM？

在 JavaScript 中，DOM 和 BOM 是两个核心概念，它们都与浏览器环境相关，但功能和用途完全不同。

DOM（文档对象模型）

DOM全称Document Object Model，即文档对象模型。它表示 HTML 或 XML 文档的结构化表示。

主要特点：

• 将 HTML/XML 文档表示为树形结构
• 每个标签、属性、文本都是树中的一个节点
• 提供操作文档内容的 API

常见用途：

• 获取页面元素：document.getElementById()
• 修改元素内容：element.innerHTML
• 添加/删除元素：appendChild(),removeChild()
• 修改样式：element.style.color = 'red'

示例代码：

// 获取元素consttitle=document.getElementById('title');// 修改内容title.textContent='新的标题';// 添加新元素constnewDiv=document.createElement('div');newDiv.textContent='我是新添加的div';document.body.appendChild(newDiv);

BOM（浏览器对象模型）

BOM全称Browser Object Model，即浏览器对象模型。它表示浏览器窗口以及与浏览器交互的对象。

主要特点：

• 以window对象为核心
• 包含浏览器窗口、历史记录、位置信息等
• 不同浏览器实现可能略有差异

常见对象：

• window：浏览器窗口对象
• navigator：浏览器信息
• location：URL 信息
• history：浏览历史
• screen：屏幕信息

示例代码：

// 获取浏览器信息console.log(navigator.userAgent);// 获取当前 URLconsole.log(location.href);// 跳转到新页面location.href='https://www.example.com';// 获取屏幕尺寸console.log(screen.width,screen.height);

核心区别对比

实际应用场景

DOM 应用场景

1. 动态更新页面内容：根据用户操作更新显示
2. 表单验证：检查用户输入
3. 交互效果：点击、悬停等事件响应
4. 单页应用：不刷新页面更新内容

BOM 应用场景

1. 页面跳转：location.href
2. 浏览器信息获取：判断浏览器类型
3. 窗口控制：打开新窗口、调整大小
4. 历史记录：前进、后退操作

总结

简单来说：

• DOM是操作页面内容的工具
• BOM是操作浏览器窗口的工具

在实际开发中，两者经常结合使用。例如，通过 BOM 获取浏览器信息，然后通过 DOM 根据这些信息调整页面显示。

记住这个简单的区分：DOM 管页面里有什么，BOM 管浏览器怎么用。