深入显出BOM（第一天）----BOM基础

超、凢脫俗 2023-02-13 11:04 41阅读 0赞

### 目标： ###

> 能够知道浏览器的顶级对象window
> 
> 能够使用window.onload事件
> 
> 能够使用window.onresize事件
> 
> 能够说出两种定时器的区别
> 
> 能够使用location对象的href属性完成页面之间的跳转
> 
> 能够使用location对象获取url中的参数部分
> 
> 能够使用history提供的方法实现页面刷新

## 1. BOM ##

### 1.1 什么是BOM ###

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

### 1.2 BOM的构成 ###

BOM 比 DOM 更大，它包含 DOM。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]

### 1.3 顶级对象window ###

![在这里插入图片描述][20200528134329718.png]

### 1.4 window对象的常见事件 ###

#### 页面（窗口）加载事件（2种） ####

**第1种**

![在这里插入图片描述][20200528134525212.png]

window.onload 是窗口 (页面）加载事件，**当文档内容完全加载完成**会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

![在这里插入图片描述][2020052813455465.png]

**第2种**

![在这里插入图片描述][20200528134613447.png]

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

IE9以上才支持！！！

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

#### 调整窗口大小事件 ####

![在这里插入图片描述][20200528134703356.png]

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意：

1.  只要窗口大小发生像素变化，就会触发这个事件。
2.  我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

### 1.5 定时器（两种） ###

window 对象给我们提供了 2 个非常好用的方法-定时器。

*  setTimeout()
 *  setInterval()

#### setTimeout() 炸弹定时器 ####

##### 开启定时器 #####

![在这里插入图片描述][20200528134837550.png]

![在这里插入图片描述][20200528134902180.png]

![在这里插入图片描述][20200528134917537.png]

>     普通函数是按照代码顺序直接调用。
>     
>     简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
>     例如：定时器中的调用函数，事件处理函数，也是回调函数。
>     
>     以前我们讲的   element.onclick = function(){}   或者  element.addEventListener(“click”, fn);   里面的 函数也是回调函数。

##### 案例：5秒后关闭广告 #####

![在这里插入图片描述][20200528135100567.png]

<body>
        <img src="images/ad.jpg" alt="" class="ad">
        <script>
            // 获取要操作的元素
            var ad = document.querySelector('.ad');
    		// 开启定时器
            setTimeout(function() { 
                ad.style.display = 'none';
            }, 5000);
        </script>
    </body>

##### 停止定时器 #####

![在这里插入图片描述][20200528135145938.png]  
![在这里插入图片描述][20200528135207358.png]

<button>点击停止定时器</button>
        <script>
            var btn = document.querySelector('button');
    		// 开启定时器
            var timer = setTimeout(function() { 
                console.log('爆炸了');
            }, 5000);
    		// 给按钮注册单击事件
            btn.addEventListener('click', function() { 
                // 停止定时器
                clearTimeout(timer);
            })
        </script>

#### setInterval() 闹钟定时器 ####

##### 开启定时器 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]

### 案例：倒计时 ###

![在这里插入图片描述][2020052813534994.gif]

![在这里插入图片描述][20200528135330850.png]

<div class="box">
            <span>1</span>:
            <span>2</span>:
            <span>3</span>
        </div>
        <button>停止倒计时</button>
        <script>
            // 获取元素
            var spans = document.querySelectorAll('span');
            var button = document.querySelector('button');
            // 获取未来时间的时间戳
            var nextTime = +new Date('2020-10-1 13:0:0');
            // 先调用一次函数，防止刷新存在空白
            myTime();
            // 用定时器让时间动起来
            var mySetInterval = setInterval(myTime, 1000);
            // 封装函数来获取填充数
            function myTime() { 
                // 获取现在时间的时间戳
                var nowTime = +new Date();
                // 倒计时时间的时间戳等于（自定义时间的时间戳-现在时间的时间戳）
                // 除以1000得到总秒数
                var useTime = (nextTime - nowTime) / 1000;
                var h = parseInt(useTime / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                var m = parseInt(useTime / 60 % 60);
                m = m < 10 ? '0' + m : m;
                var s = parseInt(useTime % 60);
                s = s < 10 ? '0' + s : s;
    
                // 给每个盒子填充数据
                spans[0].innerHTML = h;
                spans[1].innerHTML = m;
                spans[2].innerHTML = s;
            }
            // 点击button停止倒计时
            button.addEventListener('click', function() { 
                clearInterval(mySetInterval);
            });
            // 添加不能右键事件
            document.addEventListener('contextmenu', function(e) { 
                e.preventDefault()
            });
            // 添加不能选中事件
            document.addEventListener('selectstart', function(e) { 
                e.preventDefault()
            })
        </script>

##### 停止定时器 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]

#### 案例：发送短信倒计时 ####

点击按钮后，该按钮5秒之内不能再次点击，防止重复发送短信。

![在这里插入图片描述][20200528135619682.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]

<input type="number"> <button>发送</button>
        <script>
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() { 
                var time = 6;
                this.disabled = true;
                const timer = setInterval(function() { 
                    if (time < 1) { 
                        btn.disabled = false
                        btn.innerHTML = '发送'
                        clearInterval(timer)
                    } else { 
                        btn.innerHTML = time + '秒后重试';
                        time--;
                    }
                }, 1000)
            })
        </script>

### 1.6 this指向问题 ###

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向

1.  全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2.  方法调用中谁调用this指向谁
3.  构造函数中this指向构造函数的实例

<button>点击</button>
        <script>
            // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
            // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
            console.log(this);
            function fn() { 
                console.log(this);
            }
            window.fn();
            window.setTimeout(function() { 
                console.log(this);
            }, 1000);
            // 2. 方法调用中谁调用this指向谁
            var o = { 
                sayHi: function() { 
                    console.log(this); // this指向的是 o 这个对象
                }
            }
            o.sayHi();
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() { 
                    console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
                })
            // 3. 构造函数中this指向构造函数的实例
            function Fun() { 
                console.log(this); // this 指向的是fun 实例对象
            }
            var fun = new Fun();
        </script>

### 1.7 location对象 ###

#### 什么是 location 对象 ####

![在这里插入图片描述][20200528171256206.png]

#### URL ####

![在这里插入图片描述][20200528171312961.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]

#### location 对象的属性 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]  
**重点记住：href 和 search**

#### 案例：5秒钟自动跳转页面 ####

![在这里插入图片描述][20200528173748494.gif]

![在这里插入图片描述][20200528171844559.png]

<div></div>
        <script>
            // 获取元素
            var div = document.querySelector('div');
            var time = 5;
            var timer = setInterval(myTime, 1000);
            // 调用防止出现空白
            myTime();
    
            function myTime() { 
                if (time == 0) { 
                    location.href = 'https://www.baidu.com';
                } else { 
                    div.innerHTML = time + '秒后跳转至百度';
                    time--;
                }
            }
        </script>

#### 案例：获取URL参数 ####

![在这里插入图片描述][20200528173841815.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 7]

<div></div>
    	<script>
            console.log(location.search); // ?uname=cwen
            // 1.先去掉？ substr('起始的位置'，截取几个字符);
            var params = location.search.substr(1); // uname=cwen
            console.log(params);
            // 2. 利用=把字符串分割为数组 split('=');
            var arr = params.split('=');
            console.log(arr); // ["uname", "cwen"]
            var div = document.querySelector('div');
            // 3.把数据写入div中
            div.innerHTML = arr[1] + '欢迎您';
        </script>

#### location对象的常见方法 ####

![在这里插入图片描述][20200528172043753.png]

<button>点击</button>
        <script>
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() { 
                // 记录浏览历史，所以可以实现后退功能
                // location.assign('http://www.itcast.cn');
                // 不记录浏览历史，所以不可以实现后退功能
                // location.replace('http://www.itcast.cn');
                location.reload(true);
            })
        </script>

### 1.8 navigator对象 ###

![在这里插入图片描述][20200528173926306.gif]

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户哪个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 
        window.location.href = "";     //手机
     } else { 
        window.location.href = "";     //电脑
     }

### 1.9 history对象 ###

![在这里插入图片描述][20200528174009886.gif]

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

![在这里插入图片描述][20200528172132565.png]

history对象一般在实际开发中比较少用，但是会在一些 OA (Office Automation)办公系统中见到。

## 2. JS执行机制 ##

以下代码执行的结果是什么？

console.log(1);
     
     setTimeout(function () { 
         console.log(3);
     }, 1000);
     
     console.log(2);
     //输出：1,2，3

以下代码执行的结果是什么？

console.log(1);
     
     setTimeout(function () { 
         console.log(3);
     }, 0);
     
     console.log(2);
      //输出：1,2，3

### 2.1 JS 是单线程 ###

![在这里插入图片描述][20200528172418505.png]

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
    	这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

### 2.2 同步任务和异步任务 ###

单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了**同步任务**和**异步任务**。

#### 同步 ####

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

#### 异步 ####

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

**注意**：同步与异步的本质在于：各个任务的执行顺序不同

>     JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
>     
>     同步任务指的是：
>     	在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
>     异步任务指的是：
>     	不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 8]

### 2.3 JS执行机制（事件循环） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 9]  
同步任务都在主线程上，形成一个执行栈  
由于主线程不断地重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（event loop）

### 冲冲冲 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528134257857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528134317149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200528134329718.png]: https://img-blog.csdnimg.cn/20200528134329718.png
[20200528134525212.png]: https://img-blog.csdnimg.cn/20200528134525212.png
[2020052813455465.png]: https://img-blog.csdnimg.cn/2020052813455465.png
[20200528134613447.png]: https://img-blog.csdnimg.cn/20200528134613447.png
[20200528134703356.png]: https://img-blog.csdnimg.cn/20200528134703356.png
[20200528134837550.png]: https://img-blog.csdnimg.cn/20200528134837550.png
[20200528134902180.png]: https://img-blog.csdnimg.cn/20200528134902180.png
[20200528134917537.png]: https://img-blog.csdnimg.cn/20200528134917537.png
[20200528135100567.png]: https://img-blog.csdnimg.cn/20200528135100567.png
[20200528135145938.png]: https://img-blog.csdnimg.cn/20200528135145938.png
[20200528135207358.png]: https://img-blog.csdnimg.cn/20200528135207358.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528135244509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[2020052813534994.gif]: https://img-blog.csdnimg.cn/2020052813534994.gif
[20200528135330850.png]: https://img-blog.csdnimg.cn/20200528135330850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528135558488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200528135619682.gif]: https://img-blog.csdnimg.cn/20200528135619682.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200528135652232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200528171256206.png]: https://img-blog.csdnimg.cn/20200528171256206.png
[20200528171312961.png]: https://img-blog.csdnimg.cn/20200528171312961.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200528175612767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200528175637730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200528173748494.gif]: https://img-blog.csdnimg.cn/20200528173748494.gif
[20200528171844559.png]: https://img-blog.csdnimg.cn/20200528171844559.png
[20200528173841815.gif]: https://img-blog.csdnimg.cn/20200528173841815.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200528171955480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200528172043753.png]: https://img-blog.csdnimg.cn/20200528172043753.png
[20200528173926306.gif]: https://img-blog.csdnimg.cn/20200528173926306.gif
[20200528174009886.gif]: https://img-blog.csdnimg.cn/20200528174009886.gif
[20200528172132565.png]: https://img-blog.csdnimg.cn/20200528172132565.png
[20200528172418505.png]: https://img-blog.csdnimg.cn/20200528172418505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200528172722426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2020052817274322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70