BOM
Posted yh-3175339026
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM相关的知识，希望对你有一定的参考价值。
1.什么是BOM
1.1、 概念
BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）
作用：
①提供了ES和页面的运行环境
②浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主
③浏览器的规范没有涉及到的范围，使用ES的规范
1.2、window的具体功能和作用
window：窗口
作用：window提供的窗口 或 窗口与窗口之间的操作
因为所有内容都运行在浏览器中，所以，window也是浏览器的js中的顶层对象
所有的全局变量和函数，都属于window
window在使用过程中可以省略
注意，严格模式下，全局函数如果省略window，会导致全局函数中的this指向undefined
2.方法（内置全局函数）
2.1、弹出框三兄弟
- 弹出信息框：alert() 确认：返回undefined；
- 弹出对话框：prompt() 确认：返回输入的值；取消：返回null；
- 弹出选择框：confirm() 确认：返回turn； 取消：返回false；
- 注意原理，将来会使用html+css+js模拟
2.2、 页面的打开和关闭
- open() 在新的页面打开参数里的网站；
- close() 关闭当前页面
- 注意：
①尽量配合行为适用，不要直接执行；
②而且某些浏览器还有兼容性；
3. 计时器
3.1、计时器（定时器）（重复执行）：
3.1.1、开
- setInterval()
- 功能：每隔参数2的时间，执行一次参数1的函数
- 参数：参数1：函数；参数2：毫秒数
- 返回值：当前计时器的唯一标志，是个数值，只有一个作用：用来清除当前计时器！！！
- 是否改变原数据：否
3.1.2、关
- clearInterval()
- 功能：用来关闭计时器
- 参数：要关闭的计时器的返回值 所在的变量
- 返回值：无
- 是否改变：否
3.2、延时器（延迟，一次）
3.2.1、开
- setTimeout()
- 功能：延迟 参数2的时间，执行一次参数1的函数
- 参数：参数1：函数；参数2：毫秒数
- 返回值：当前延时器的唯一标志，是个数值，只有一个作用：用来清除当前延时器！！！
- 是否改变原数据：否`
3.2.2、关
- clearTimeout()
- 功能：用来关闭延时器
- 参数：要关闭的延时器的返回值 所在的变量！切记，变量！
- 返回值：无
- 是否改变：否
4.事件（内置全局事件）
4.1window浏览器事件
- load：加载
- window.onload不仅是页面的加载，还在等待资源的加载
- document.onload仅仅是页面的加载
- resize：改变大小
- scroll：滚动
- 语法：
- 事件源.on事件名 = 事件处理函数
5. 子对象（内置对象）
5.1、history：历史记录
5.1.1、控制浏览器的前进后退刷新等于历史记录相关的功能
5.1.2、属性：
- 历史记录的个数：history.length
5.1.3、方法：
- 前进：history.forward()
- 后退：history.back()
- 前进或后退指定的步数：history.go(num); num为正前进，为负后退，0刷新
5.2、location：地址url
5.2.1、控制浏览器的地址栏的内容
5.2.2、属性：
①既可以获取又可以设置：当前页面的地址，设置之后，页面会自动跳转
- location.href
②既可以获取也可以设置：当前页面地址中向后台发送的数据部分（?后的部分），页面也会跳转
- location.search
③既可以获取也可以设置：当前页面地址的锚点连接（哈希值，#后的部分），页面也会跳转
- location.hash
5.2.3、方法：
①重新加载当前地址：
- location.reload()
②跳转方法，必须传参，空字符刷新，指定地址会跳转
- location.assign("")
5.3、navigator：浏览器信息（了解）
- navigator.userAgent：浏览器信息
- navigator.appName：浏览器名字（废弃）
- navigator.appVersion：浏览器版本
- navigator.appCodeName：浏览器内核
- navigator.platform：运行系统
5.4、 screen：屏幕尺寸（了解）：显示器的分辨率
5.5frames：框架（了解）：需要配合frame使用
6.补充：
6.1、获取页面的可视（看得见的区域）区域的大小：
①document.documentElement.clientWidth（获取页面的宽度）
②document.documentElement.clientHeight（获取页面的高度）
③只能获取，不能设置
6.2、获取滚动之后距离上边或左边的距离：
①document.documentElement.scrollTop（距离上边多远）
②document.documentElement.scrollLeft（距离左边多远）
③既能获取，又能设置
以上是关于BOM的主要内容，如果未能解决你的问题，请参考以下文章