一.概述

1.浏览器对象模型(Browser Object Model)，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

2.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性，其中包括：

（1）Window：代表整个浏览器窗口，同时Window也是网页中的全局对象
（2）Navigator：代表的当前浏览器信息，通过该对象可以识别不同浏览器
（3）Location：代表当前浏览器的地址栏信息，通过它可以获取地址栏信息或操作浏览器跳转页面
（4）History：代表浏览器的历史记录，可以通过该对象操作浏览器的历史记录

  • 由于隐私设置，该对象不能获取到具体的历史记录，只能操作浏览器前进或后退

（5）Screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器信息

3.BOM并没有ECMA，W3C这种标准，由浏览器厂商自己定义，所以兼容性不是很好

4.BOM比DOM大，它包含了DOM，BOM中最大的是window

5.window对象是浏览器的顶级对象

（1）他是JS访问浏览器窗口的一个接口
（2）他是一个全局对象。定义在全局作用域的变量和函数都会变成window的属性和方法
（3）window.name是window的一个特殊对象

二.window对象常见事件

1.窗口加载事件：

（1）语法：window.onload=function(){}或window.addEventListener(“load”,function(){})
（2）window.onload是窗口加载事件，当文档内容全部加载完成会触发该事件
（3）有了window.onload就可以把JS代码写道元素上，因为onload是等页面全部加载完毕再去执行处理函数
（4）window.onload传统注册事件方式只能写一次，如果有多次，会以最后一个为准
（5）window.addEventListener(“load”,function(){})该方法写多个就不会冲突
（6）若是页面图片非常多，建议使用document.addEventListener(‘DOMContentLoaded’,function(){})

  • 该方法会将DOM加载完毕就显示，所以比load块

  • load会等所有元素都加载出来，才显示

    2.调整窗口大小事件：

    （1）语法：window.onresize=function(){}或window.addEventListener(“resize”,function(){})
    （2）只要窗口大小发生变化就会触发事件，调用其处理函数
    （3）window.innerWidth表示当前屏幕的宽度 同理window.innerHeight表示当前屏幕高度

    三.定时器

    1.setTimeout()：用于设置一个延时器，该延时器在时间到期执行调用函数

    （1）语法：window.setTimeout(调用函数，[延迟的毫秒数])； //window可以省略，时间的单位是毫秒

  • setTimeout(function(){},2000); //到了2秒就去调用函数，调用一次就结束

（2）一个页面可能有很多延时器，一般都给取名字，也就是赋值给变量
（3）此处的调用函数也称为回调函数(callback)：需要等待，时间到了再回来调用

2.window.clearTimeout(timeout ID)：停止setTimeout延时器

（1）timeout ID就是延时器的名字，也就是变量名

3.setInterval()：定时器，用于重复调用，每个设定的时间，就调用一次函数

（1）语法：window.setInterval(调用函数，[延迟的毫秒数])； //window可以省略，时间的单位是毫秒

  • setInterval(function(){},2000); //每经过2秒就去调用一次函数

（2）一个页面可能有很多定时器，一般都给取名字，也就是赋值给变量

4.window.clearInterval(interval ID/Name)：清除先前通过调用Interval()建立的定时器

5.案例：京东秒杀倒计时

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="times_wrap" class="time_num">
  11.         距离结束时间：
  12.         <div class="time_w">
  13.             <b id="times_d" class="time"> </b>天
  14.             <b id="times_h" class="time"> </b>时
  15.             <b id="times_m" class="time"> </b>分
  16.             <b id="times_s" class="time"> </b>秒
  17.         </div>
  18.     </div>
  19.     <script>
  20.     var time_wrap = document.getElementById("times_wrap");
  21.     var time_d = document.getElementById("times_d");
  22.     var time_h = document.getElementById("times_h");
  23.     var time_m = document.getElementById("times_m");
  24.     var time_s = document.getElementById("times_s");
  26.     var time_end = new Date("2022/5/27 18:00:00");  // 设定结束时间
  27.     time_end = time_end.getTime();
  29.     function show_time(){
  30.         var time_now = new Date();  // 获取当前时间
  31.         time_now = time_now.getTime();
  32.         var time_distance = time_end - time_now;  // 结束时间减去当前时间
  33.         var int_day, int_hour, int_minute, int_second;
  34.         if(time_distance >= 0){
  35.             // 天时分秒换算
  36.             int_day = Math.floor(time_distance/86400000)
  37.             time_distance -= int_day * 86400000;
  38.             int_hour = Math.floor(time_distance/3600000)
  39.             time_distance -= int_hour * 3600000;
  40.             int_minute = Math.floor(time_distance/60000)
  41.             time_distance -= int_minute * 60000;
  42.             int_second = Math.floor(time_distance/1000)
  44.             // 时分秒为单数时、前面加零站位
  45.             if(int_hour < 10)
  46.                 int_hour = "0" + int_hour;
  47.             if(int_minute < 10)
  48.                 int_minute = "0" + int_minute;
  49.             if(int_second < 10)
  50.                 int_second = "0" + int_second;
  52.             // 显示时间
  53.             time_d.innerHTML = int_day;
  54.             time_h.innerHTML = int_hour;
  55.             time_m.innerHTML = int_minute;
  56.             time_s.innerHTML = int_second;
  57.         }else{
  58.             time_d.innerHTML = time_d.innerHTML;
  59.             time_h.innerHTML = time_h.innerHTML;
  60.             time_m.innerHTML = time_m.innerHTML;
  61.             time_s.innerHTML = time_s.innerHTML;
  62.         }
  63.     };
  64.     window.setInterval(function(){
  65.         show_time();
  66.     }, 1000);
  68.     </script>
  69. </body>
  70. </html>

案例：模拟获取验证码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="number">
  11.     <button>发送</button>
  12.     <script>
  13.         var btn = document.querySelector('button');
  14.         var time = 60;
  15.         var timer = btn.addEventListener('click',function(){
  16.             btn.disabled = true;
  17.             setInterval(function(){
  18.                 if(time == 0){
  19.                     //复原按钮并清除定时器
  20.                     clearInterval(timer);
  21.                     btn.disabled = false;
  22.                     btn.innerHTML = '发送';
  23.                     time = 60;
  24.                 }else{
  25.                     btn.innerHTML = '还剩'+time+'秒可再次发送';
  26.                                     time--;
  27.                 }           
  28.             },1000)
  29.         })
  30.     </script>
  31. </body>
  32. </html>

四.this指向问题：

1.方法中一般是指向调用它的对象

2.全局作用域和普通函数中this指向全局对象window

3.构造函数中this指向构造函数的实例

五.JS执行队列：

1.JS最大的特点就是单线程，也就是说同一时间只能做一件事。例如添加和删除不能同时进行，后来HTML5提出Web Worker标准，允许JS创建多线程，因此出现了同步和异步

2.同步：一个任务完成再去执行另一个。例如烧水十分钟，烧开了再去切菜炒菜

3.异步：做一件事的同时可以做其他的事。例如烧水的过程中去切菜

4.JS执行机制：JS先执行执行栈的同步任务，异步任务放到任务队列，一旦执行栈的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

（1）同步任务：都在主线程上执行，形成一个执行栈
（2）异步任务：通过回调函数实现的(异步任务放到任务队列)

六.location对象

1.window提供的属性，用于获取或设置窗体的url，并可用于解析url，该属性返回一个对象，所以将这个属性也成为location对象

2.url：统一资源定位符，是互联网上标准资源的地址，互联网的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器该怎么处理它

（1）url的一般语法格式：protocol://host[:port]/path/[?query]#fragment

  • 例如：http://www.itcast.cn/index.html?name=andy&age=18#link | 组成 | 说明 | | —- | —- | | protocol | 通信协议 常用的http,ftp,maito等 | | host | 主机(域名) | | port | 端口号 可选，省略时使用默认端口号，例如http的默认端口为80 | | path | 路径由零个或多个/间隔的字符串 | | query | 参数 以键值对的形式 通过&分隔 | | fragment | 片段 #后内容 常见于链接 锚点 |

3.location对象的属性：

location对象属性 返回值
location.href 获取或设置整个url
location.host 返回主机(域名)
location.port 返回端口号 未写端口号返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段

4.location的常用方法：

location对象方法 返回值
location.assign() 重定向页面，也就是跳转页面
location.replace() 替换当前页面
location.reload() 重回加载页面

（1）location.assign()会记录历史，所以可以回退
（2）location.replace()：不记录历史，不能回退

七.navigator对象

1.包含有关浏览器的信息，常用的是userAgent，该属性返回由客户机发送服务器的请求头信息

八.history对象

1.与浏览器历史记录进行交互。该对象包含用户访问过的URL

2.history对象方法

history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数为1前进一个页面 如果是-1 后退一个页面
length 获取当前访问的链接数量