DOM是文档对象模型 BOM是浏览器对象模型
一、核心概念对比表
| 特性 | DOM（文档对象模型） | BOM（浏览器对象模型） |
|---|---|---|
| 作用对象 | 操作网页内容（HTML/XML） | 操作浏览器窗口和行为 |
| 核心对象 | document | window |
| 标准化 | W3C标准 | 无官方标准，各浏览器实现略有不同 |
| 主要功能 | 元素增删改查、事件处理、样式操作 | 窗口控制、导航管理、屏幕信息、历史记录 |
| 常见API | getElementById、querySelector | alert、location、history、screen |
| 层级关系 | DOM是BOM的一部分（document属于window） | BOM包含DOM |
二、代码示例理解
1. DOM操作（修改页面内容）
<div id="app">初始内容</div>
<script>
// DOM操作
const div = document.getElementById('app');
div.textContent = '修改后的内容'; // 修改文本
div.style.color = 'red'; // 修改样式
div.addEventListener('click', () => {
alert('点击了DIV');
});
</script>
2. BOM操作（浏览器交互）
// BOM常用操作
window.innerWidth; // 获取视口宽度
window.open('https://example.com'); // 打开新窗口
window.location.href = '/new-page'; // 页面跳转
window.localStorage.setItem('key', 'value'); // 本地存储
window.history.back(); // 返回上一页
三、核心对象关系图
BOM (浏览器对象模型)
└── window（全局对象）
├── DOM
│ ├── document（文档根节点）
│ ├── element（元素节点）
│ └── ...（其他DOM节点）
│
├── location（地址信息）
├── navigator（浏览器信息）
├── screen（屏幕信息）
├── history（浏览历史）
└── localStorage（本地存储）
四、高频面试题精讲
1. 为什么document.write()不推荐使用？
它会重写整个文档流，且必须在页面加载阶段使用，否则会覆盖现有内容。
2. 如何检测浏览器类型？
// BOM的navigator对象
const isChrome = /Chrome/.test(navigator.userAgent);
const isMobile = /Mobi/.test(navigator.userAgent);
3. DOM和BOM的加载顺序
window.onload = function() { // BOM事件，等所有资源加载完毕
console.log('BOM加载完成');
};
document.addEventListener('DOMContentLoaded', () => { // DOM事件，仅HTML解析完成
console.log('DOM加载完成');
});
五、记忆口诀
"DOM管网页内容改，BOM管浏览器窗
document操作元素树，window控制导航窗"
面试时如果被问到，可以这样回答：
"DOM是文档对象模型，用来操作网页内容，它的核心对象是document,常见的APi有getElemtById获取对应id的元素然后可以使用相应的方法对网页内容进行增删改查和事件处理以及样式操作，比如在获取id为app的div元素后，可以通过div.textContent来修改文本，div.style.color来修改样式，div.addEventListener来监听事件。"
"BOM是浏览器对象模型，用来操作浏览器窗口和行为，它的核心对象是window，常见的api有alert浏览器弹窗，innerWidth获取视口的长度等，用来进行窗口控制、导航管理等操作。"
"另外DOM是BOM的一部分，实际上DOM是window的一个属性。BOM事件需要等所有的资源加载完毕，DOM事件仅需要HTML页面加载完毕"
