WebAPI-4(BOM,123均为DOM)（同步，异步的概念--所有回调函数都是异步）_什么类型的webapi需要异步编程开发吗-优快云博客

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/104535292

本文深入探讨了浏览器对象模型(BOM)的概念，解释了BOM如何通过一系列对象、方法和属性提供浏览器窗口的交互效果。文章详细介绍了window对象的角色、事件处理、定时器功能以及location和history对象的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM浏览器模型

BOM是浏览器对象模型，主要是给浏览器窗口提供一个交互效果。由一系列对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JS语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是网景公司浏览器标准的一部分，兼容性比较差。
BOM比DOM更大，它包含DOM
window对象是浏览器的顶级对象，它具有双重角色
他是JS访问浏览器窗口的一个接口。
它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()，prompt()等。
window.name 特殊，所以document 命名时基本不用name()

window对象的常见事件

窗口加载事件
window.onload = function() {}
或者
window.addEventListener(“load”,function() {} );
要等整个页面内容，页面dom元素（文档中的标签），图片，flash，css 之类的全都加载完之后才能执行

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
注意：有了window.onload就可以把JS代码写到页面元素的上方，因为onload是电等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
window.addEventListener(‘load’, function(){})；没有限制
DOMContentLoaded
DOM中加载完就可以执行，不包含图片，flash,css等就可以执行加载速度更快
调整窗口大小事件
window.onresize = function () {} 或者
window.addEventListener(“resize”,function(){});
是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕的宽度。

定时器

window 对象给我们提供了2个非常好用的方法 - 定时器
(1)
setTimeout(调用函数，[延迟的毫秒数])；
页面中可能有很多的定时器，我们经常给定时器加标时符（给每一个定时器起名字）
秒数为毫秒
```
function callback() {
console.log(‘爆炸了’);

    }
   var time1 =  setTimeout(callback, 3000);
    var time2 =  setTimeout(callback, 3000);

	setTimeout() 这个调用函数我们也称为回调函数 callback
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20200227154121453.png)
	简单理解：回调 ， 就是回头调用的意思，上一件事干完，再回头再调用这个函数
	**停止setTimeout() 定时器**
	window.clearTimeout(timeout ID);
	==定时器案例==

var ad = document.querySelector('.ad');
        var timer = setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
        //停止定时器
        ad.addEventListener('click', function() {
            clearTimeout(timer);
            console.log('停止');

        })

	**只调用一次，就结束了这个定时器**

(2)setInterval()定时器
	window.setInterval(回调函数，[间隔的毫秒数]);
	setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
	**每隔间隔时间就调用一次回调函数，会重复调用**

在这里插入图片描述

倒计时案例，setInterval()定时器

<style>
        div {
            width: 200px;
            margin: 100px auto;
        }
        
        span {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin-left: 5px;
            color: white;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
            background-color: black;
        }
    </style>
</head>

<body>
    <!-- 倒计时是不断变化的，因此需要定时器来自动变化(setInterval) -->
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2020-2-28 10:00:00');
        countDown(); //1.先调用一次这个函数，防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            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>

发送短信案例

 手机号码：<input type="number"><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var timer = 3; // 剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true; //按钮禁用
            var time = setInterval(function() {
                if (timer == 0) {
                    // 清除定时器复原按钮
                    clearInterval(time);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    timer = 3; //这个3让其重新开始
                } else {
                    btn.innerHTML = '还剩下' + timer + '秒';
                    timer--;
                }
            }, 1000);
        })
    </script>

this
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
全局变量是window
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例
JS执行队列

他们的本质区别是：这条流水线上各个流程的执行顺序不同
location对象
window对象给我们提供给了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
**URL：**统一资源定位符是互联网上标准资源的地址，互联网上的每个文件都有唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
表单有了name才能提交

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