JavaScript BOM 是什么

打开浏览器的开发者工具，随便点一下“控制台”，输入alert(window.innerWidth)，就能弹出当前浏览器窗口的宽度数字——这背后其实藏着一个很多前端开发者天天用却没特意留意的东西，它就是JavaScript里的BOM。

对于刚接触前端的人来说，可能之前只听过HTML、CSS，甚至还没理清它们和JavaScript的关系，BOM这个缩写听起来有点陌生，但它的作用其实就是帮JavaScript“跟浏览器对话”。简单说，如果把网页比作你家的客厅，HTML是客厅里的沙发、电视这些具体的家具（也就是页面内容），CSS是给这些家具刷颜色、摆位置的装饰，那BOM就是你用来控制客厅门窗、灯光、窗帘这些和整个房子相关设施的遥控器。它不负责客厅里的具体物品，却能帮你操作整个空间的外围设置。

你天天用的功能，大多是BOM在干活

很多日常网页里的小功能，其实都是BOM的功劳，只是你没意识到。比如你在电商网站上，想把当前商品页面“分享到微信”，点击后会自动弹出微信的分享窗口，这个窗口的大小、位置，就是BOM帮你控制的；再比如你逛地图类网站，滚动页面时地图自动加载更多内容，不需要刷新整个页面，这种和浏览器滚动条、地址栏相关的操作，也得靠BOM里的window对象来协调。

还有更常见的场景：你在一个长网页里，想回到顶部的时候，直接点页面右下角的“回到顶部”按钮，这个按钮点击后能让整个页面平滑滚动到最顶端，而不是跳一下，这也是BOM在控制页面的滚动行为——如果没有BOM，JavaScript只能修改页面里某一个元素的位置，没法直接操作整个浏览器窗口的滚动状态。

BOM和DOM的区别，用买菜就能讲明白

刚接触的人很容易把BOM和DOM搞混，其实用“去菜市场买菜”的例子就能分清楚。DOM是你手里的购物清单，上面列着你要买的白菜、萝卜，它只负责和“购物篮里的东西”打交道，比如告诉你“你买了3个苹果”“把这个萝卜从清单上划掉”；而BOM是你去菜市场的整个行程安排，比如你几点出门、坐哪路公交、到了市场之后走哪个入口、能不能在市场里临时改一下买完菜的回家路线——它不关心你买了什么菜，只关心你和整个市场（也就是浏览器）的交互。

比如你用document.getElementById("按钮")获取页面上的按钮，这是在操作DOM；但你用window.open()打开一个新的浏览器标签页，或者用location.href修改当前页面的网址，这就是在操作BOM了。DOM是BOM的一部分内容，BOM包含了所有和浏览器窗口相关的功能，而DOM只是BOM里window对象下的一个子对象，专门负责页面内容。

为什么要懂BOM？

对于前端开发者来说，BOM是连接页面和浏览器的桥梁，很多实际开发的需求都离不开它。比如做一个响应式的图片查看器，需要根据浏览器窗口的大小来调整图片的尺寸，这就要用到BOM里window.innerWidth的属性；再比如做一个定时提醒的功能，比如“5秒后弹出一个提示框”，用setTimeout()这个方法就能实现，它也是BOM提供的功能。

如果不懂BOM，你可能会在遇到这类需求时，不知道怎么下手，只能去查一堆复杂的文档；但搞懂它的核心逻辑，就能把这些日常用到的功能串起来，明白为什么有的代码能操作页面内容，有的代码能控制浏览器本身。

总的来说，BOM就是JavaScript用来和浏览器“沟通”的工具，它不是什么高深的技术，而是前端开发里和日常场景紧密相关的基础内容，理解了它，就能更明白自己每天写的代码，到底是在操作页面，还是在和整个浏览器打交道。