javascript - BOM概念/方法/对象

Day19

一、 BOM

1. 概念
   BOM（Browse of Module）浏览器对象模型，是个模型，这个模型由一个对象window来体现
2. 作用：
   提供了ES和页面的运行环境
   浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，一浏览器的标准为主
   浏览器的规范没有涉及到的范围，使用ES规范
   兼容：不是兼容的兼容问题 alert(); 每个浏览器的弹出窗口样式都不一样
3. window的具体功能和作用

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

4. 方法（内置全局函数）

• 弹出框三兄弟
   弹出信息框: alert();
   弹出对话框: prompt(); 返回值为用户输入内容
   弹出确认框: confirm(); 返回值为“true”或者“false”

• 页面的打开和关闭
   open(); 参数为要打开的网址的地址
   close(); 关闭当前网页
   注意：
  尽量配合行为使用，不要直接执行；
  有兼容性问题

• 计时器（设置时间间隔，执行某个动作）
   setInterval(参数1,参数2);
  功能：每隔参数2的时间，执行一次参数1的函数；
  参数：参数1：函数，参数2：毫秒数
  返回值：当前计时器的唯一标志，是个数值，唯一作用-用来清除当前计时器
  是否改变原数据：否

      var t = setInterval(function(){
          console.log("hello");
      }, 1000);
  

 clearInterval();
功能：关闭计时器
参数：要关闭的计时器的返回值所在的变量
返回值：无
是否改变元数据：否;

        document.onclick = function(){
            clearInterval( t );
        };

• 延时器（延迟，一次）
   setTimeout();
  功能：延迟参数2的时间，执行一次参数1的函数；
  参数：参数1：函数，参数2：毫秒数
  返回值：当前计时器的唯一标志，是个数值，唯一作用-用来清除当前计时器
  是否改变原数据：否

      var t = setTimeout(function(){
          console.log("hello");
      }, 5000);
  

 clearInterval();
功能：关闭计时器
参数：要关闭的计时器的返回值所在的变量
返回值：无
是否改变元数据：否；

        document.onclick = function(){
            clearTimeout( t );
        };

5. 事件（内置全局事件）：

• window浏览器事件
   load：加载
  window.onload 不仅是页面的加载，还在等在资源的加载
  document.onload 仅仅是页面的加载
   resize: 改变窗口大小
   scrool: 滚动窗口
• 语法：
   事件源.on事件名 = 事件处理函数
   btn.onclick = function(){}
   window.onlaod = funciton(){}
   onlaod = funciton(){}

6. 子对象（内置对象）

• history: 历史记录
   控制浏览器的前进候退刷新，等于历史记录相关的功能
   属性：
  历史记录的个数：history.length
   方法：
  前进：history.forward();
  后退：history.back();
  前进或候退指定的步数：histroy.go(num); num为正前进，为负候退，0刷新当前页面
• location: url ;
   控制浏览器的地址栏的内容
   属性：
  既可以获取又可以设置：当前页面的地址，设置之后，页面会自动跳转
  js实现跳转的方式：location.href
  既可以获取也可以设置：当前页面地址中向后台发送的数据部分（？后的部分），页面也会跳转
  location.search
  既可以获取也可以设置：当前页面的锚点链接（hash值，#后面的内容），页面也会跳转
  location.hash
   方法：
  重新加载当前地址，刷新
  location.reload();
  跳转方法，必须传参，空字符刷新，指定地址会跳转
  location.assign(“”);
• navigator: 浏览器信息（了解）
  以下测试是在Mac OS X 10_15_4系统的Chrome/81.0.4044.129浏览器进行的测试
  navigator.userAgent：浏览器信息
  “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36”
  navigator.appName：浏览器名字（废弃）
  “Netscape”
  navigator.appVersion：浏览器版本
  “5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36”
  navigator.appCodeName：浏览器内核
  “Mozilla”
  navigator.platform：运行系统
  “MacIntel”
• screen: 显示屏幕尺寸
  显示器的分辨率
• frames: 框架
  需要配合frame使用
• 补充：
   获取页面的可视（看得见的区域）区域的大小
  document.documentElement.clientWidth
  document.documentElement.clientHeight
  只能获取，不能设置
   获取滚走的了距离
  document.documentElement.scrollTop
  document.documentElement.scrollLeft
  既能获取，又能设置