2020.0510--BOM

BOM：
一：什么是BOM
1：概念：
BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）
- 作用：
- 提供了ES和页面的运行环境
- 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主
- 浏览器的规范没有涉及到的范围，使用ES的规范
- 宪法：ES，地方法规：浏览器的规定
- 浏览器 > ES ×
- 兼容:
- alert(1)：功能一致，没有兼容
- 但每个浏览器显示的样式都不一样

2：window的具体使用和功能

• window：窗口
• window提供的窗口 或 窗口与窗口之间的操作
• 因为所有内容都运行在浏览器中，所以，window也是浏览器的js中的顶层对象
  • 所有的全局变量和函数，都属于window
  • window在使用过程中可以省略
  • 注意，严格模式下，全局函数如果省略window，会导致全局函数中的this指向undefined

二：方法（内置全局函数）：
1：弹出框三兄弟：
弹出信息框：alert()
弹出对话框：prompt()
弹出选择框：confirm()
2：页面的打开和关闭：
open() 打开
close() 关闭
注意：
尽量配合行为适用，不要直接执行
而且某些浏览器还有兼容性

3：计时器：
计时器（定时器）（重复执行）
- 开
- setInterval()
- 功能：每隔参数2的时间，执行一次参数1的函数
- 参数：参数1：函数；参数2：毫秒数
- 返回值：当前计时器的唯一标志，是个数值，只有一个作用：用来清除当前计时器！！！
- 是否改变原数据：否
`` js var t = setInterval(function(){ console.log("hello"); }, 1000);
- 关
- clearInterval()
- 功能：用来关闭计时器
- 参数：要关闭的计时器的返回值 所在的变量！切记，变量！
- 返回值：无
- 是否改变：否
js document.onclick = function(){ clearInterval( t ); };

4：延时器：

• 开
  - setTimeout()
  - 功能：延迟 参数2的时间，执行一次参数1的函数
  - 参数：参数1：函数；参数2：毫秒数
  - 返回值：当前延时器的唯一标志，是个数值，只有一个作用：用来清除当前延时器！！！
  - 是否改变原数据：否
  js var t = setTimeout(function(){ console.log("hello"); }, 5000);
  • 关
    • clearTimeout()
    • 功能：用来关闭延时器
    • 参数：要关闭的延时器的返回值 所在的变量！切记，变量！
    • 返回值：无
    • 是否改变：否
      ` ``j s
      document.onclick = function(){
      clearTimeout( t );
      };

三：事件（内置全局事件）：
1：window浏览器事件

• load：加载

  • window.onload不仅是页面的加载，还在等待资源的加载
  • document.onload仅仅是页面的加载

• resize：改变大小

• 获取页面的可视（看得见的区域）区域的大小

• document.documentElement.clientWidth 宽

• document.documentElement.clientHeight 高

• 只能获取，不能设置

• scroll：滚动

• 获取滚走的了距离

• document.documentElement.scrollTop 上

• document.documentElement.scrollLeft 左

• 既能获取，又能设置

2：语法：

• 事件源.on事件名 = 事件处理函数
• 如：btn.onclick = function(){}
• 如：window.onlaod = funciton(){}
• 如：onlaod = funciton(){}

四：子对象（内置对象，需要在其他页面控制台测试）：
1：history：历史记录
- 控制浏览器的前进后退刷新等于历史记录相关的功能
- 不方便在代码中临时测试，所以在浏览器打开其他页面测试
- 属性：
- 历史记录的个数：history.length
- 方法：
- 前进：history.forward()
- 后退：history.back()
- 前进或后退指定的步数：history.go(num); num为正前进，为负后退，0刷新

2：location：地址url
- 控制浏览器的地址栏的内容
- 不方便在代码中临时测试，所以在浏览器打开其他页面测试
- 属性：
- 既可以获取又可以设置：当前页面的地址，设置之后，页面会自动跳转
- js实现跳转的方式：
- location.href
- 既可以获取也可以设置：当前页面地址中向后台发送的数据部分（?后的部分），页面也会跳转
- location.search
- 既可以获取也可以设置：当前页面地址的锚点连接（哈希值，#后的部分），页面也会跳转
- location.hash
- 方法：
- 重新加载当前地址，意味着刷新了
- location.reload()
- 跳转方法，必须传参，空字符刷新，指定地址会跳转
- location.assign("")

3：navigator：浏览器信息

• navigator.userAgent：浏览器信息
• 返回的是浏览器信息
  - navigator.appName：浏览器名字（废弃）
  - “Netscape”
• navigator.appVersion：浏览器版本
• 返回的是浏览器版本信息
  • navigator.appCodeName：浏览器内核
    • “Mozilla”
  • navigator.platform：运行系统
    • “MacIntel”

4：screen：屏幕尺寸
屏幕分辨率
5：iframe：框架
需要配合frame使用