很多刚接触前端开发的初学者，甚至是一些工作一两年的工程师，常常混淆 BOM 和 DOM 这两个概念。在技术面试中，当被问及“JavaScript 由哪几部分组成”时，很多人能脱口而出 ECMAScript，却对 BOM 和 DOM 的具体边界含糊其辞。事实上，标准的 JavaScript 实现由三部分构成：核心语法 ECMAScript、浏览器对象模型 BOM（Browser Object Model）以及文档对象模型 DOM（Document Object Model）。如果把浏览器比作一辆汽车，ECMAScript 是引擎和传动系统，决定了车怎么跑；BOM 则是方向盘、车窗和后视镜，让你能控制车辆本身；而 DOM 则是车内的座椅、仪表盘和装饰，让你能操作车内的具体物件。理解这两者的区别与联系，是编写高质量、兼容性好的 Web 应用的基础。
本文将剥离枯燥的理论定义，从实际开发场景出发，深入剖析 BOM 和 DOM 的本质差异，列举各自的高频实用函数，并探讨在现代前端框架盛行之下，原生操作依然不可或缺的价值。
深度解析 BOM：浏览器环境的掌控者
BOM 的核心定义与架构特点
BOM，即 Browser Object Model，浏览器对象模型。它并没有像 DOM 那样拥有严格的 W3C 标准规范，早期主要由各大浏览器厂商自行实现，这也导致了过去不同浏览器间 BOM API 的兼容性噩梦。好在随着 HTML5 规范的推进，绝大多数 BOM 功能已经标准化。BOM 的核心对象是 window，它在浏览器环境中充当全局对象的角色。这意味着你在全球作用域下声明的任何变量或函数，实际上都自动成为了 window 对象的属性和方法。
BOM 的强大之处在于它提供了与浏览器窗口进行交互的能力，这些能力完全独立于网页的具体内容。无论你的页面上是一个空的 <body> 还是复杂的三维动画，BOM 都能让你获取屏幕分辨率、操作浏览器历史记录、控制定时器以及管理弹窗。它就像是 JavaScript 伸向浏览器外壳的一只手，让脚本能够感知并影响用户所在的浏览器环境。
高频实用的 BOM 核心函数列举
在实际开发中，我们很少直接操作 window 对象本身，而是频繁调用其下属的子对象方法。以下是几个最核心的 BOM 对象及其常用函数，这些是每位前端开发者必须烂熟于心的工具。
1. window 对象的全局控制函数window 对象不仅包含子对象，还直接提供了一些基础但至关重要的功能。
setTimeout()和setInterval()：这是实现异步延迟执行和周期性任务的核心。例如，实现一个倒计时功能或者轮播图的自动播放，都离不开它们。值得注意的是，返回的 ID 可以用于clearTimeout()和clearInterval()来取消任务，防止内存泄漏。open()和close()：用于打开新浏览器窗口或关闭当前窗口。虽然现代浏览器出于用户体验和安全考虑，限制了非用户触发事件下的弹窗行为，但在某些特定业务场景（如第三方登录授权）中依然有用。scrollTo()和scrollBy()：控制页面的滚动位置。在实现“回到顶部”按钮或锚点平滑滚动时，这两个函数比手动修改scrollTop属性更加语义化且兼容性好。
2. location 对象的导航与解析window.location 对象提供了当前页面 URL 的详细信息，并允许进行页面跳转。
location.href：获取或设置完整的 URL。将其赋值为新地址会立即加载新页面，这等同于用户点击链接。location.replace()：这是一个非常实用的函数，它用新页面替换当前页面，关键是不在浏览历史中留下记录。常用于登录成功后跳转，防止用户点击“后退”按钮回到登录页。location.reload()：刷新当前页面。传入true参数可以强制从服务器重新加载，而不是读取缓存，这在调试或需要获取最新数据时非常关键。location.search和location.hash：分别获取 URL 中的查询参数（?后面）和哈希值（#后面）。在不使用路由框架的原生开发中，这是实现页面间参数传递的主要手段。
3. navigator 与 history 的环境感知
navigator.userAgent：虽然现代开发更推荐使用特性检测而非浏览器嗅探，但在某些需要针对特定设备做降级处理的场景，读取用户代理字符串依然是必要手段。history.pushState()和history.replaceState()：这是 HTML5 带来的革命性 API。它们允许在不刷新页面的情况下修改浏览器的地址栏 URL 和历史记录栈。单页应用（SPA）路由原理正是基于这两个函数实现的，让用户感觉像是在多页面间切换，实则是在同一个页面内动态渲染。
全面掌握 DOM：网页内容的操作基石
DOM 的树形结构与节点本质
如果说 BOM 关注的是“壳”，那么 DOM（Document Object Model）关注的就是“核”。DOM 将 HTML 或 XML 文档解析为一个由节点组成的树形结构，称为文档树。在这个树中，每个标签、属性、甚至文本内容都被抽象为一个节点（Node）对象。这种结构化映射使得 JavaScript 能够通过编程方式访问、修改、添加或删除文档的任何部分，从而实现动态交互。
DOM 标准由 W3C 制定，具有极高的规范性，这意味着无论在 Chrome、Firefox 还是 Safari 中，标准的 DOM 操作行为都是一致的。理解 DOM 的关键在于理解“节点”的概念：元素节点（如 <div>）、属性节点（如 class="btn"）、文本节点（标签内的文字）都是树的一部分。所有的操作本质上都是对这棵树的结构遍历和内容修改。
核心 DOM 操作函数实战分类
DOM 操作繁杂众多，但可以归纳为查询、创建、修改和事件四大类。以下是开发中最高频使用的函数集合。
1. 元素查询与获取
这是所有操作的起点。老旧的 document.getElementById 依然高效，但现代开发更倾向于使用选择器引擎。
document.querySelector()和document.querySelectorAll()：这两个函数支持 CSS 选择器语法，极其灵活。前者返回匹配的第一个元素，后者返回静态节点列表（NodeList）。例如document.querySelector('.container > .active')可以精准定位复杂层级下的元素。element.closest()：这是一个常被忽视但极好用的函数。它从当前元素开始向上遍历父节点，返回匹配指定选择器的最近祖先元素。在处理事件委托时，它能帮你快速判断点击目标是否位于某个特定组件内部。
2. 节点的创建与增删
动态渲染列表或模态框时，需要手动操作节点树。
document.createElement()：创建一个全新的元素节点，此时它还未进入文档流。parent.appendChild()和parent.insertBefore()：将新节点插入到文档中。注意，appendChild如果被调用的节点已存在于文档中，它会被移动到新位置，而不是复制。element.remove()：这是现代浏览器支持的直接移除自身的方法，比老式的parent.removeChild(child)更加简洁直观。element.cloneNode(true)：深拷贝节点，包括其所有子节点。在需要复用复杂结构时非常有用，但需注意事件监听器不会自动复制。
3. 内容与样式的动态修改
element.innerHTML和element.textContent：前者可以解析 HTML 标签，存在 XSS 风险，需谨慎使用；后者仅处理纯文本，性能更好且安全。在批量更新列表时，优先使用textContent。element.classList.add()、.remove()和.toggle()：操作 CSS 类的标准方式。相比直接操作style属性，使用类名切换能将样式逻辑保留在 CSS 文件中，符合关注点分离原则。element.setAttribute()和element.getAttribute()：通用属性操作接口。对于data-*自定义属性，也可以使用更便捷的element.dataset对象直接访问。
4. 事件监听与传播控制
element.addEventListener()：现代事件绑定的标准方式，支持绑定多个同类型事件监听器，且能通过第三个参数控制捕获阶段或冒泡阶段。event.preventDefault()和event.stopPropagation()：在事件处理函数内部，前者阻止默认行为（如表单提交、链接跳转），后者停止事件冒泡，防止触发父级元素的监听器。这是实现自定义控件（如下拉菜单、模态窗）逻辑封闭性的关键。
两者关系的辩证看待与现代开发启示
包含关系与职责边界
理清 BOM 和 DOM 的关系，可以用一句话概括：DOM 是 BOM 的一部分。window 对象作为 BOM 的核心，拥有一个 document 属性，这个属性就是 DOM 树的根节点。也就是说，我们通过 window.document 访问到了整个文档对象模型。
职责上，BOM 负责“环境交互”，解决的是“在哪里运行”的问题，比如窗口多大、历史记录如何、网址是什么；DOM 负责“内容操作”，解决的是“显示什么”的问题，比如文字颜色、列表顺序、图片切换。在实际代码中，两者往往交织在一起。例如，当你监听 window 的 resize 事件（BOM）来重新计算某个 div 的布局（DOM）时，就是在协同使用这两套模型。
框架时代下的原生价值
在 React、Vue 等现代前端框架统治的今天，很多开发者习惯了通过状态驱动视图，极少直接触碰原生的 DOM API。框架确实极大地提高了开发效率，屏蔽了浏览器兼容性差异，但这并不意味着我们可以抛弃对 BOM 和 DOM 的理解。
首先，框架的底层依然依赖这些原生 API 进行渲染和更新。当遇到性能瓶颈需要优化重绘重排，或者需要集成非框架编写的第三方库（如 D3.js、Mapbox）时，直接操作 DOM 的能力显得尤为重要。其次，一些特定的浏览器行为，如监听页面可见性变化（document.visibilityState）、处理 PWA 的安装提示、操作剪贴板或全屏模式，往往需要直接调用 BOM 接口，框架未必封装了所有场景。最后，理解底层的节点结构和事件传播机制，能帮助开发者更好地排查“事件不触发”、“内存泄漏”等疑难杂症。
掌握 BOM 和 DOM，不仅仅是记住几个函数名，更是建立起对浏览器运行机制的深刻认知。这种认知能让你在面对复杂交互需求时，不再局限于框架提供的现成组件，而是能够因地制宜，利用原生能力构建出性能更优、体验更佳的 Web 应用。
