DOM 与 BOM：前端开发者必须分清的两大核心对象
作为前端开发的基础，DOM 和 BOM 是 JavaScript 与浏览器交互的核心，但很多初学者容易将二者混淆 —— 前者操控网页内容，后者掌控浏览器本身。本文将从定义、核心作用、使用场景、核心对象等维度，彻底讲清 DOM 与 BOM 的区别与联系，帮你建立清晰的前端知识体系。
一、先搞懂：DOM 和 BOM 到底是什么？
1. DOM：操控网页内容的 “文档对象模型”
DOM（Document Object Model，文档对象模型）是浏览器将 HTML/XML 文档解析后生成的节点树模型，它将网页的每一个元素（如<div>、<img>）、文本、属性都封装成 “对象”，让 JavaScript 能通过编程方式操作这些对象 —— 比如新增一个按钮、修改文本内容、给元素绑定点击事件。
核心定位：DOM 是 JavaScript 操作 “网页内容” 的接口，只关注<html>、<body>内部的内容，与浏览器窗口本身无关。
2. BOM：掌控浏览器的 “浏览器对象模型”
BOM（Browser Object Model，浏览器对象模型）是 JavaScript 与浏览器 “窗口层面” 交互的接口，它提供了一系列对象（如window、location、history），用于控制浏览器窗口、导航、屏幕、弹窗等，不涉及网页内容本身。
核心定位：BOM 是 JavaScript 操作 “浏览器” 的接口，关注浏览器窗口、地址栏、历史记录、屏幕等全局层面的功能。
二、核心区别：一张表看懂 DOM 与 BOM
| 维度 | DOM（文档对象模型） | BOM（浏览器对象模型） |
|---|---|---|
| 核心关注 | 网页内容（HTML/XML 文档） | 浏览器窗口 / 环境（非网页内容） |
| 顶层对象 | document（隶属于window） | window（浏览器顶级对象，全局作用域） |
| 标准规范 | W3C 标准（各浏览器实现一致） | 无官方统一标准（浏览器厂商自定义，存在兼容性差异） |
| 核心对象 / 功能 | -document：操作文档节点-element：操作元素-node：节点增删改查- 事件：元素点击、输入等 | -window：窗口控制、全局作用域-location：URL 跳转 / 刷新-history：浏览器历史记录-navigator：浏览器信息-screen：屏幕尺寸-alert/confirm：弹窗 |
| 使用场景 | 动态修改页面内容（如新增表格行、修改文本）、绑定元素事件、操作样式 | 页面跳转、刷新、打开新窗口、获取浏览器信息、控制窗口大小、定时器 |
| 依赖关系 | 依赖 BOM 的window对象（document是window的属性） | 独立存在，包含 DOM（DOM 是 BOM 的一部分） |
三、深度解析：DOM 与 BOM 的核心使用场景
1. DOM 的典型使用场景：操控网页内容
DOM 的核心是 “节点操作”，所有操作都围绕网页内容展开，比如：
javascript
运行
// 1. 获取元素（DOM核心操作第一步） const box = document.getElementById('box'); const list = document.querySelectorAll('li'); // 2. 修改内容/样式 box.textContent = '新的文本内容'; // 修改文本 box.style.color = 'red'; // 修改样式 box.classList.add('active'); // 添加类名 // 3. 新增元素 const btn = document.createElement('button'); // 创建按钮 btn.textContent = '点击我'; box.appendChild(btn); // 插入到页面 // 4. 绑定元素事件 btn.onclick = function() { alert('按钮被点击（DOM事件）'); };核心特点：所有操作都针对document下的节点，最终体现在网页内容的变化上。
2. BOM 的典型使用场景：操控浏览器行为
BOM 的操作不涉及网页内容，而是控制浏览器的全局行为，比如：
javascript
运行
// 1. 页面跳转（BOM核心） window.location.href = 'https://example.com'; // 当前窗口跳转 window.open('https://example.com', '_blank'); // 新窗口打开 // 2. 控制浏览器历史记录 window.history.back(); // 后退 window.history.forward(); // 前进 // 3. 窗口控制 window.resizeTo(800, 600); // 调整窗口大小 window.scrollTo(0, 0); // 回到页面顶部（注：scroll属于BOM，操作视口） // 4. 浏览器信息获取 const isMobile = /Android|iPhone/.test(navigator.userAgent); // 判断设备类型 // 5. 定时器（BOM核心功能） setTimeout(() => { window.location.reload(); // 3秒后刷新页面（BOM+DOM结合） }, 3000);核心特点：操作的是浏览器层面的功能，即使没有网页内容（空白页面），BOM 依然可以正常使用。
四、容易混淆的关键点：DOM 与 BOM 的联系
DOM 是 BOM 的 “子集”：BOM 的顶层对象是
window，而document（DOM 的核心）是window的一个属性 —— 也就是说，所有 DOM 操作都隶属于 BOM 的window对象。比如document.getElementById()等价于window.document.getElementById()。二者常结合使用：实际开发中，DOM 和 BOM 很少单独使用，比如：
javascript
运行
// 点击DOM元素（DOM操作），触发浏览器跳转（BOM操作） document.querySelector('#jumpBtn').onclick = function() { window.location.href = './detail.html'; // BOM操作 };全局作用域的归属：在浏览器中，全局变量、全局函数都会成为
window（BOM）的属性，而 DOM 的document本身也是window的属性，比如：javascript
运行
var a = 10; console.log(window.a); // 10（全局变量属于BOM的window） console.log(window.document === document); // true（DOM隶属于BOM）
五、新手避坑：常见混淆场景解析
误区 1：把 “页面滚动” 当成 DOM 操作
很多人认为scroll是 DOM 操作，但实际上，window.scrollTo()、element.scrollIntoView()中：
window.scrollTo()：属于 BOM，操作的是浏览器视口的滚动；element.scrollIntoView()：属于 DOM，操作的是元素在视口中的位置。
误区 2：把 “弹窗” 当成 DOM 操作
alert()、confirm()是 BOM 的window方法，而非 DOM—— 即使页面没有任何 HTML 内容，依然可以执行window.alert('hello')。
误区 3：认为 “事件绑定” 都是 DOM 操作
- 元素的
onclick（如btn.onclick）：DOM 事件，绑定在元素节点上； window.onresize、window.onload：BOM 事件，绑定在浏览器窗口上，与网页内容无关。
六、总结：如何快速区分 DOM 与 BOM？
记住两个核心判断标准：
- 操作的是 “网页内容”→ DOM：比如修改文本、新增按钮、调整元素样式，都属于 DOM；
- 操作的是 “浏览器 / 窗口”→ BOM：比如跳转页面、打开新窗口、获取浏览器信息、定时器，都属于 BOM。
DOM 和 BOM 是前端的两大基础，理解二者的区别，能帮你：
- 快速定位问题：比如页面跳转失败→ 查 BOM 的
location；内容修改无效→ 查 DOM 的节点获取； - 写出更规范的代码：比如区分全局变量（BOM）和元素变量（DOM），避免命名冲突；
- 理解浏览器的工作原理：知道 JavaScript 如何与浏览器、网页内容交互。
- 无论是面试还是实际开发，分清 DOM 和 BOM 都是前端开发者的必备能力 —— 前者让网页 “有内容、可交互”，后者让网页 “能跳转、能适配”，二者结合，才构成了完整的前端交互体系。