BOM（浏览器对象模型）与DOM（文档对象模型）
七崽爱吃小饼干2026/01/24阅读 0专栏 JavaScript
JavaScript 能在浏览器中实现交互功能，核心就是依赖 BOM 和 DOM，两者共同构成了 JS 操作浏览器和页面的基础，但职责分工完全不同。
一、先搞懂：什么是 BOM？
BOM 是 Browser Object Model（浏览器对象模型） 的缩写，它的核心是 操作浏览器本身（和页面内容无关）。
简单说：浏览器的窗口、地址栏、刷新按钮、历史记录、弹出框、浏览器尺寸变化这些，都归 BOM 管。BOM 没有统一的官方标准（早期由各大浏览器厂商自定义），现在大部分功能已经趋于规范。
BOM 的核心：window 对象
BOM 的顶层对象是 window，它有两个特殊身份：
- 浏览器的全局对象，浏览器中所有的 BOM 相关对象、全局变量、全局函数、DOM 对象，最终都挂载在
window上（可以省略window直接调用，比如alert()等价于window.alert()）。 - 代表浏览器的一个窗口或标签页，每个标签页都是一个独立的
window实例。
BOM 的核心子对象和常用功能
window 包含多个内置子对象，每个子对象对应浏览器的一个功能模块，下面是最常用的几个：
1. window.navigator：浏览器信息查询
用于获取当前浏览器的品牌、版本、系统等信息，常用来做浏览器兼容性判断。
javascript
// 常用属性
console.log(navigator.userAgent); // 浏览器核心信息（包含浏览器类型、版本、系统等）
console.log(navigator.appName); // 浏览器名称（大部分现代浏览器返回 "Netscape"，兼容性一般）
console.log(navigator.platform); // 运行浏览器的操作系统（如 "Win32"、"MacIntel"）
2. window.location：地址栏操作
用于获取或修改当前页面的 URL 地址，是日常开发中使用频率极高的 BOM 对象。
javascript
// 1. 获取 URL 相关信息
console.log(location.href); // 完整 URL（如 "https://www.baidu.com/s?wd=js"）
console.log(location.host); // 主机名+端口（如 "www.baidu.com"）
console.log(location.pathname); // URL 路径部分（如 "/s"）
console.log(location.search); // URL 查询参数（如 "?wd=js"）
// 2. 常用操作（修改地址栏，实现页面跳转）
location.href = "https://www.baidu.com"; // 跳转到百度（会留下历史记录，可回退）
location.replace("https://www.baidu.com"); // 跳转到百度（不留下历史记录，无法回退）
location.reload(); // 刷新当前页面（等价于浏览器刷新按钮）
3. window.history：浏览器历史记录操作
用于操作浏览器的前进、后退历史记录（注意：无法获取具体的历史 URL，出于安全考虑）。
javascript
history.back(); // 后退一步（等价于浏览器左上角 "后退" 按钮）
history.forward(); // 前进一步（等价于浏览器左上角 "前进" 按钮）
history.go(1); // 前进 1 步（参数为 -1 等价于 back()，-2 就是后退 2 步）
4. window.screen：屏幕信息查询
用于获取用户设备的屏幕尺寸、分辨率等信息，常用来做响应式布局适配。
javascript
console.log(screen.width); // 设备屏幕的宽度（像素，不含任务栏等）
console.log(screen.height); // 设备屏幕的高度（像素，不含任务栏等）
console.log(screen.availWidth); // 屏幕可用宽度（去除任务栏等占用后的宽度）
console.log(screen.availHeight); // 屏幕可用高度（去除任务栏等占用后的高度）
5. BOM 常用全局方法（挂载在 window 上）
这些方法无需额外调用子对象，直接使用即可，也是日常开发的基础：
javascript
alert("这是一个提示框"); // 弹出提示框（只有确定按钮）
confirm("确定要删除吗？"); // 弹出确认框（确定/取消，返回布尔值：确定=true，取消=false）
prompt("请输入你的姓名：", "张三"); // 弹出输入框（返回用户输入的内容，取消返回 null）
// 定时器（核心异步方法）
setTimeout(() => {
console.log("3 秒后执行一次");
}, 3000); // 延迟指定时间（毫秒）执行一次回调函数
setInterval(() => {
console.log("每隔 1 秒执行一次");
}, 1000); // 每隔指定时间（毫秒）重复执行回调函数
二、再搞懂：什么是 DOM？
DOM 是 Document Object Model（文档对象模型） 的缩写，它的核心是 操作浏览器加载的页面内容（和浏览器本身无关）。
简单说：页面上的所有标签（<div>、<p>、<a>）、属性、文本、样式，甚至注释，都归 DOM 管。DOM 有统一的官方标准（W3C 标准），所有浏览器都遵循，兼容性远好于 BOM。
DOM 的核心：document 对象
DOM 的顶层对象是 document（它是 window 的子对象，即 window.document，通常省略 window 直接调用），它代表整个 HTML 文档页面。
DOM 会把整个 HTML 页面解析成一个 树形结构（文档树），每个 HTML 元素、属性、文本都被封装成了一个 节点（Node），常见节点类型有 3 种：
- 元素节点：HTML 标签（如
<div>、<body>），这是最常用的节点。 - 属性节点：标签上的属性（如
class="box"、id="title"）。 - 文本节点：标签内的文本内容（如
<p>这是文本</p>中的 "这是文本"）。
文档树的简单结构示例（帮助理解）：
document（文档节点）
└── html（根元素节点）
├── head（元素节点）
│ └── title（元素节点）
│ └── "我的页面"（文本节点）
└── body（元素节点）
├── div（元素节点，class="box"）
│ └── "Hello DOM"（文本节点）
└── p（元素节点）
└── "这是一个段落"（文本节点）
DOM 的核心常用功能（开发高频）
DOM 的核心操作围绕「增、删、改、查」页面元素展开，下面是最核心、最常用的功能：
1. 查：获取页面元素（查询节点）
这是 DOM 操作的基础，所有后续操作都需要先获取到目标元素，常用方法有：
javascript
// 1. 根据 id 获取（返回单个元素对象，id 唯一）
const title = document.getElementById("title");
// 2. 根据 class 获取（返回元素集合（伪数组），需遍历获取单个元素）
const boxList = document.getElementsByClassName("box");
// 3. 根据标签名获取（返回元素集合（伪数组），兼容性最好）
const pList = document.getElementsByTagName("p");
// 4. 根据选择器获取（现代开发首选，语法和 CSS 选择器一致，灵活强大）
const singleEle = document.querySelector(".box"); // 获取第一个符合条件的元素
const allEle = document.querySelectorAll("#list li"); // 获取所有符合条件的元素（伪数组）
2. 改：修改页面元素（修改节点）
获取到元素后，可以修改它的内容、属性、样式等，这是实现页面交互的核心。
javascript
// 先获取一个目标元素（后续操作基于它）
const box = document.querySelector(".box");
// 1. 修改元素内容
box.innerText = "修改后的文本内容"; // 只识别文本，不解析 HTML 标签（安全）
box.innerHTML = "<h3>修改后的 HTML 内容</h3>"; // 解析 HTML 标签，可插入新元素（注意 XSS 风险）
// 2. 修改元素属性（通用属性：src、href、class 等）
box.setAttribute("class", "new-box"); // 通用设置属性方法
box.removeAttribute("id"); // 删除属性
console.log(box.getAttribute("class")); // 获取属性值
// 3. 修改元素样式（行内样式）
box.style.width = "200px"; // 注意：CSS 属性中的横线要转为驼峰命名（如 background-color → backgroundColor）
box.style.backgroundColor = "red";
box.style.fontSize = "16px";
// 4. 修改元素类名（推荐：通过类名控制样式，而非直接修改行内样式）
box.classList.add("active"); // 添加一个类
box.classList.remove("new-box"); // 删除一个类
box.classList.toggle("show"); // 切换类（有则删，无则加）
3. 增：添加页面元素（创建/插入节点）
用于动态向页面中添加新的元素，步骤是「创建元素 → 插入页面」。
javascript
// 1. 创建新元素（创建元素节点）
const newDiv = document.createElement("div");
// 2. 给新元素设置内容/样式/属性（可选）
newDiv.innerText = "这是动态创建的元素";
newDiv.style.color = "blue";
newDiv.classList.add("new-element");
// 3. 插入到页面中（必须插入到文档树中，才能在页面上显示）
const container = document.querySelector(".container");
container.appendChild(newDiv); // 插入到 container 内部的最后面
container.insertBefore(newDiv, container.firstChild); // 插入到 container 内部的第一个子元素前面
4. 删：删除页面元素（删除节点）
用于动态移除页面上的不需要的元素，常用两种方法：
javascript
// 先获取目标元素和它的父元素
const targetEle = document.querySelector(".target");
const parentEle = targetEle.parentElement;
// 方法 1：父元素删除子元素（推荐，更灵活）
parentEle.removeChild(targetEle);
// 方法 2：元素自身删除（现代浏览器支持，更简洁）
targetEle.remove();
5. 事件绑定（DOM 交互的核心）
DOM 允许给元素绑定事件，当用户触发某个行为（点击、鼠标移入、输入等）时，执行对应的逻辑，这是实现「用户操作 → 页面响应」的关键。
javascript
// 获取目标元素
const btn = document.querySelector("button");
// 绑定点击事件（常用方式）
btn.addEventListener("click", () => {
alert("按钮被点击了！");
// 这里可以写后续的 DOM 操作（如修改内容、添加元素等）
});
// 其他常用事件：mouseover（鼠标移入）、mouseout（鼠标移出）、input（输入框输入）、load（页面加载完成）
三、BOM 和 DOM 的核心区别（重点）
很多新手容易混淆两者，用一张表就能清晰区分：
| 对比维度 | BOM（浏览器对象模型） | DOM（文档对象模型） |
|---|---|---|
| 核心职责 | 操作浏览器本身（与页面内容无关） | 操作页面内容（与浏览器本身无关） |
| 顶层对象 | window（全局对象） | document（挂载在 window 下的子对象） |
| 标准规范 | 无统一官方标准（早期浏览器厂商自定义） | 有统一 W3C 标准（所有浏览器遵循，兼容性好） |
| 操作范围 | 窗口、地址栏、历史记录、定时器、弹出框等 | HTML 标签、文本、属性、样式、事件等 |
| 核心关系 | BOM 包含 DOM（document 是 window 的属性） | DOM 是 BOM 的一部分，依赖 BOM 存在于浏览器中 |
一个简单的例子
当你打开浏览器，输入 URL 并访问页面：
- 你点击浏览器的「刷新」按钮 → 这是 BOM 操作（
window.location.reload()）。 - 页面刷新后，你点击页面上的「提交」按钮，页面上显示了新的文本 → 这是 DOM 操作（获取按钮+绑定点击事件+修改文本内容）。
总结
- JS 操作浏览器和页面的基础是 BOM 和 DOM，BOM 管浏览器，DOM 管页面内容。
- BOM 顶层是
window，核心子对象有location、history等，常用定时器、弹出框等全局方法。 - DOM 顶层是
document，核心是将 HTML 解析为文档树，常用「增删改查」元素和绑定事件实现页面交互。 - 两者关系：BOM 包含 DOM，DOM 依赖 BOM 才能在浏览器中运行，共同支撑 JS 的浏览器交互功能。