Web APIs 学习笔记（五）--- BOM

一、BOM的概念

​ BOM（Browser Object Model）是浏览器对象模型的简称，它提供了与浏览器窗口进行交互的一系列对象，每个对象中都包含了很多方法和属性，其核心对象就是浏览器窗口 window。

二、BOM和DOM的区别

三、BOM的构成

​ BOM所涵盖的范围比DOM更大，DOM只是BOM的一部分。BOM的顶级对象window中包含：document、location、navigation、screen、history等。

四、window

​ window 是浏览器的顶级对象，它既是JavaScript访问浏览器窗口的一个接口，又是一个全局对象，所有定义在全局作用域的变量和函数都相当于window对象的属性和方法。在调用window对象的属性和方法时可以省略window，比如：window.alert() 省略成 alert()。

​ 注意：我们在定义 js 变量时说过，不要定义变量名为 name 是因为在 window 对象中已经定义了name 属性，可以通过 window.name 来查看。

五、window 对象的常用事件

1、窗口(页面)加载事件

① window.onload = function(){} 或 window.addEventListener(“load”,function(){ })

​ 当页面内容完全完全加载完成后（包括图像、css样式、视频等）就会触发 load 事件，然后调用绑定的事件处理函数。

​ 之前我们都是把js代码写到页面元素的下方，现在我们可以通过load事件把 js 代码写到页面元素的上方，因为 load 事件是在页面元素加载完成后再去执行的。

② window.addEventListener(‘DOMContentLoaded’,function(){ })

​ 当页面的DOM结构加载完成时，就可以触发 DOMContentLoaded 事件，适用于页面图片、视频等资源很大的情况，但具有兼容性问题， IE9以上才支持。

// 案例代码

    <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
    	// 先弹出 33 再弹出 22
    </script>

2、调整窗口大小事件

window.onresize = function(){ } 或 window.addEventListener(“resize”,function(){ })

​ 当浏览器窗口的大小发生变化时，就会触发 resize 事件，我们可以利用window.innerWidth 获得当前窗口的宽度、window.innerHeight 获得当前窗口的高度以及此事件完成响应式布局。

​ 注意： window.innerWidth 和 window.innerHeight 获得的窗口的宽度和高度是不包括单位 px 的，获得的只是数值。

// 案例代码

    <script>
        // 注册页面加载事件
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
        	// 注册调整窗口大小事件
            window.addEventListener('resize', function() {
                // window.innerWidth 获取窗口大小
                console.log('变化了');
                // 当页面宽度小于800px 时，使div隐藏
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>

六、window定时器

1、window.setTimeout(回调函数,延迟时间)

​ 该定时器方法有两个参数，第一个参数是一个函数，用来实现想要的功能，这个函数我们也称为回调函数 callback。第二个参数是一个数字，表示延迟多少毫秒后执行第一个参数，注意该参数的单位是毫秒。

​ **注意：**①window可以省略，直接写成 setTimeout()

​ ②第一个参数可以直接写函数，也可以已经声明函数的函数名。

​ ③第二个参数的默认值为 0，设定值的时候 只需要写数字，单位系统指定为 毫秒。

​ ④为了区分不同的定时器，我们可以把定时器赋值给一个变量。

​ ⑤ 回调函数是指先去做另一件事，当这件事做完后再回来调用这个函数。定时器的调用函数就是回调函数，当页面加载完一定时间后，再调用这个函数。

// 案例代码

<script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个事先定义好的函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>

2、window.clearTimeout(定时器名)

​ 我们可以通过该方法来取消通过setTimeout() 设置的定时器。window 可以省略，写成clearTimeout() 。只能取消赋值给变量、拥有名字的定时器。

// 案例代码

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

3、window.setInterval(回调函数,间隔的时间)

​ 该定时器就像一个重复的提示器，每隔一个特定的时间，就调用一次回调函数，一直不断地重复执行。第一个参数是一个函数，表示要做的事情。第二个参数是一个数值，表示间隔多长时间就调用一次函数，单位为毫秒。

​ **注意：**①window可以省略，直接写成 setInterval()

​ ②第一个参数可以直接写函数，也可以已经声明函数的函数名。

​ ③第二个参数的默认值为 0，设定值的时候 只需要写数字，单位系统指定为 毫秒。

​ ④为了区分不同的定时器，我们可以把定时器赋值给一个变量。

​ ⑤ 如果第二个参数不为 0 ，那么当页面加载完成后，也要等待间隔的毫秒数之后，才会执行第一次。可以通过第一个参数使用封装函数，然后在定时器前面先调用一次的方式，来弥补这个等待的空白时间。

// 案例代码  秒杀倒计时

    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素（时分秒盒子） 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-5-15 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>

4、window.clearInterval(定时器名)

​ 我们可以通过该方法来取消通过setInterval() 设置的定时器。window 可以省略，写成clearInterval() 。只能取消赋值给变量、拥有名字的定时器。

// 案例代码

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

七、localtion对象

1、location的概念

​ window 对象中有一个location属性可以获取或者设置窗口的URL，并可以解析URL，因为此属性的返回值是一个对象，所以这个属性又称为location对象。我们通常是利用location对象来实现页面跳转和传递参数。

2、URL的概念

3、location对象的常用属性

​ 重点要记住的是 href 和 search 属性，这是我们最常用的两个属性。其中search获得参数的形式是：?参数名=参数值 ，是包含问号的。

// 案例代码

// 1.利用href 实现跳转页面
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>

// 2.利用 search 获得参数
// 在上一个页面中 已经通过表单提交了数据 此时地址栏的URL为：...../index.html?uname=andy
<div></div>
	<script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>

4、location对象的常用方法

①location.assign()

​ 此方法用于重定向页面，跟href属性一样，用来跳转页面，但不能传递数据。参数为要跳转的页面的URL地址。

②location.replace()

​ 此方法用于替换当前页面，但不记录浏览历史，所以不能后退页面。参数为要替换当前页面的URL地址。

③location.reload()

​ 重新加载页面，相当于刷新，参数为Boolean 值，如果为 true 则为强制刷新，连图片等资源也要重新加载，如果为false 则为普通刷新。

// 案例代码

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

八、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 = "";     //电脑
 }

九、history对象

​ 该对象包含了用户在浏览器中访问过的URL，也就是浏览器的历史记录，可以实现前进页面或后退页面。不过浏览器已经自带这些功能了，所以实际开发中我们比较少用。