一、先搞懂核心定义（用生活化比喻）
可以把浏览器想象成一栋房子：
BOM (Browser Object Model)：浏览器对象模型
相当于房子的整体结构（比如大门、墙壁、空调系统），它是操作浏览器本身的 API，和页面内容无关。
核心对象是window（浏览器窗口），所有 BOM 相关的属性/方法都挂在window上（比如地址栏、刷新按钮、弹窗、浏览器尺寸）。DOM (Document Object Model)：文档对象模型
相当于房子里的家具、装饰（比如桌子、沙发、挂画），它是操作网页内容的 API，把 HTML 文档转换成可被 JS 操作的“对象树”。
核心对象是document（页面文档），而document本身也是window的一个属性（window.document）。
二、具体解析 & 常用示例
1. BOM（操作浏览器）
BOM 没有统一的官方标准（不同浏览器略有差异），核心功能和常用 API：
- 控制浏览器窗口：尺寸、位置、关闭/打开新窗口
- 操作浏览器导航：地址栏、历史记录、刷新
- 浏览器环境：定时器、弹窗、本地存储
常用示例代码：
// 1. 浏览器窗口相关
console.log(window.innerWidth); // 获取浏览器可视区域宽度
window.open('https://www.baidu.com'); // 打开新窗口
window.close(); // 关闭当前窗口
// 2. 地址栏/导航相关
console.log(window.location.href); // 获取当前页面URL
window.location.reload(); // 刷新页面
window.history.back(); // 浏览器后退
// 3. 定时器（BOM核心）
setTimeout(() => { alert('3秒后弹出'); }, 3000); // 延迟执行
setInterval(() => { console.log('每秒执行'); }, 1000); // 定时重复执行
// 4. 弹窗
window.alert('提示框'); // 提示弹窗
window.confirm('确认框'); // 确认/取消弹窗
2. DOM（操作页面内容）
DOM 有 W3C 统一标准，它把 HTML 文档解析成“节点树”（比如 <html> 是根节点，<body> 是子节点，<div> 是孙子节点），JS 可以通过 DOM API 增删改查页面元素。
常用示例代码：
<!-- 先有一个简单的HTML结构 -->
<div id="box">Hello DOM</div>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<script>
// 1. 获取元素（查）
const box = document.getElementById('box'); // 通过ID获取
const lis = document.getElementsByTagName('li'); // 通过标签名获取
// 2. 修改元素（改）
box.innerText = '修改后的内容'; // 修改文本
box.style.color = 'red'; // 修改样式
// 3. 创建元素（增）
const newLi = document.createElement('li');
newLi.innerText = '列表3';
document.querySelector('ul').appendChild(newLi); // 添加到ul里
// 4. 删除元素（删）
document.querySelector('ul').removeChild(lis[0]); // 删除第一个li
</script>
三、DOM 和 BOM 的核心关系
image.png
- 从属关系：DOM 是 BOM 的一部分（
document是window的属性）； - 功能边界：BOM 管“浏览器”，DOM 管“页面内容”；
- 共同基础：都基于 JS 操作，且都是前端交互的核心。
总结
-
BOM 是操作浏览器本身的工具，核心是
window，关注浏览器窗口、导航、定时器等，无统一标准； -
DOM 是操作网页内容的工具，核心是
document，把 HTML 转成节点树，支持增删改查，有 W3C 统一标准； - 关系：DOM 属于 BOM，都挂载在
window下，是前端 JS 操作浏览器和页面的两大核心。
