本文介绍了BOM（浏览器对象模型）的基础知识，包括window对象的属性和方法，如innerWidth、innerHeight、addEventListener和数据存储。讨论了如何利用这些特性进行自适应布局、事件监听和数据持久化，并强调了跨浏览器兼容性的重要性。
前端小白🥬学习之BOM（window、innerWidth、innerHeight、addEventListener等）
一、前言
BOM、DOM，DOM、BOM傻傻分不清楚。有哪些童鞋和我一样，不是特别清楚他们分别是干啥的，他们之间到底有什么关系？以及在使用过程中到底有哪些注意事项呢？
作为一名具备开发优良传统特性的开发，我搜了对于BOM、DOM的解释，由于两块内容偏多，我们本篇文章先写BOM相关，DOM相关下篇文章给出，会在文末给出一些信息预告。
内容较多较长，建议点赞、收藏后再慢慢查看👀。
二、什么是BOM
1.官方解释
在很多前辈的文章里以及某些官方文档里都有对BOM的解释，在这里主要贴出w3c和百度百科找到的相关解释。
1）w3c给出的解释如下：
2）百度百科给出的解释如下：
2.自己对BOM的理解
总结提炼一下就是：BOM（Browser Object Model）是JavaScriopt对浏览器进行链接的一种称呼，通过JavaScriopt对BOM进行操作从而操作浏览器，这些功能分别对应不同的对象、属性和方法，如浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等，当然也可以自己依据项目的需要在window里添加该项目所需要的额外的属性、方法和对象。
⚠️注意：
BOM不像DOM有明确的统一的标准，因为每个浏览器都有自己的定义，所以某些属性和方法在使用的过程中，就需要做到兼容，特别是IE有比较多不太一样的地方。
三、BOM所包含的对象和属性-顶层对象window
浏览器通过一个个窗口呈现在用户眼前。该窗口为页面提供一个全局环境，对应的JavaScript语言也存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。不过，顶层对象在各种实现里面是不统一的。浏览器里面，顶层对象是window，所以我们可以使用window.来对浏览器窗口进行一些操作，前文提到的浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等就是由window对象统一管理的。
随便打开一个浏览器，打开该浏览器对应的JavaScript控制台，打印window看看window里面有些什么对象和属性。
我这里是Safari，便截个Safari的控制台打印的window的结果吧。
⚠️注意：
不同的浏览器，或者同一浏览器不同版本，打印出来的window对象可能不同。
四、比较常见或常用的window方法和对象有：
1. 窗口大小(尺寸):
innerWidth：浏览器窗口的内宽度
innerHeight：浏览器窗口的内高度
这两个属性在进行自适应设计/响应式布局时至关重要。不过
最低0.47元/天 解锁文章
扫一扫
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
