JavaScript BOM与DOM详解：事件、定时器与浏览器交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/123569877

BOM简介

1.什么是BOM

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

2.BOM和DOM的区别

DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。

3.BOM的构成

在这里插入图片描述

window对象的常见事件

1.窗口加载事件

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

// 方式1
window.onload = function () {};
// 方式2
window.addEventListener('load', function () {});

方法一：
window.onload = function(){
	alert("页面加载中....")
}

方法二：
window.addEventListener("load",function(){
	alert("页面加载中。。。")
})

方法三：
<body onload="test()">
    <script>
        function test (){
            alert("页面加载中....")
        }
    </script>
</body>

2.调整窗口大小事件

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {});

例：

<body>
    <script>
        window.addEventListener("resize",function(){
            console.log("窗口大小改变了....");
        })
    </script>
</body>

定时器

1.定时器方法

定时器方法如下：
在这里插入图片描述

（1）setTimeout()

setTimeout(function(){},毫秒数):在指定的毫秒数后调用函数或执行一段代码。

<style>
    div{
        width: 500px;
        margin: 100px auto;
        font-size: 25px;
        color: red;
    }
</style>
<body>
    <div></div>
    <script>
        function showTime(){
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            m= m>=10?m:'0'+m;
            var d = date.getDate();
            d= d>=10?d:'0'+d;

            var h = date.getHours();
            h= h>=10?h:'0'+h;
            var dm = date.getMinutes();
            dm= dm>=10?dm:'0'+dm;
            var ds = date.getSeconds();
            ds= ds>=10?ds:'0'+ds;

            var str = y+'年'+m+'月'+d+"日  "+h+":"+dm+":"+ds;
            document.querySelector('div').innerHTML = str;

            setTimeout(showTime,1000);
        }
        window.onload = showTime();
    </script>
</body>

（2）setInterval()

setInterval(函数,间隔时间);按照指定的周期(以毫秒计)来调用函数或执行一段代码。

（3）setTimeout和setInterval的区别

setTimeout：只执行一次
setInterval：重复执行

（2）【案例】3s内只能发送一次短信

<body>
    <div>
        <label>
            手机号码：
            <input type="text">
            <button id="btn">发送</button>
        </label>
    </div>
    <script>
        //1.获取按钮
        var btn = document.querySelector('#btn');
        var time = 3;
        
        btn.addEventListener('click',function(){
            btn.disabled = true; //按钮不可用
            //2.创建定时器：setInterval
        var timer = setInterval(function(){
            if(time == 0){
                //2.1：清除定时器
                clearInterval(timer);
                //2.2:让按钮可用
                btn.disabled = false;
                //2.3:让按钮上的文本变为‘发送’
                btn.innerHTML= '发送';
                time = 3;
            }else{
                btn.innerHTML = "还剩"+time+"秒"
                time--;
            }
        },1000)
        })
        
    </script>
</body>

JavaScript的运行机制

1.单线程

单线程：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

2.同步和异步

同步：所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：所谓异步，就是在做一件事件的同时，可以去处理其他的事情。

3.执行机制

在这里插入图片描述
例：

<body>
    <script>
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },0)

        for(var i=0,str="";i<9000000;i++){
            str += i;
        }    //利用字符串拼接运算拖慢执行时间
        console.log(2);
    </script>
</body>

location对象

location对象：地址对象

1.URL的组成

在这里插入图片描述

2.location常用属性

在这里插入图片描述

3.【案例】获取URL参数

<style>
    div{
        width: 500px;
        margin: 100px auto;
    }
</style>
<body>
    <div>
        <form action="index.html">
            用户名：
            <input type="text" name="uname">
            <button type="submit">登录</button>
        </form>
    </div>
</body>

<body>
    <div></div>
    <script>
        console.log(location.search) //输出URL中'?'之后的部分
        //去掉查询参数前的'?'
        var params = location.search.substr(1);
        console.log("查询参数：",params);
        //对参数进行分割，得到参数值
        var arr = params.split('=');
        console.log("数组：",arr);

        //将参数值放入div中
        var div = document.querySelector('div');
        div.innerHTML = decodeURIComponent(arr[1])+",欢迎您!"
    </script>
</body>