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 | BOM |
|---|---|---|
| 全称 | 文档对象模型 | 浏览器对象模型 |
| 核心对象 | document | window |
| 作用范围 | 文档内容 | 浏览器窗口 |
| 主要用途 | 操作页面元素 | 操作浏览器窗口 |
实际应用场景
DOM 应用场景
- 动态更新页面内容：根据用户操作更新显示
- 表单验证：检查用户输入
- 交互效果：点击、悬停等事件响应
- 单页应用：不刷新页面更新内容
BOM 应用场景
- 页面跳转：
location.href - 浏览器信息获取：判断浏览器类型
- 窗口控制：打开新窗口、调整大小
- 历史记录：前进、后退操作
总结
简单来说：
- DOM是操作页面内容的工具
- BOM是操作浏览器窗口的工具
在实际开发中，两者经常结合使用。例如，通过 BOM 获取浏览器信息，然后通过 DOM 根据这些信息调整页面显示。
记住这个简单的区分：DOM 管页面里有什么，BOM 管浏览器怎么用。