BOM浏览器对象模型

2天前 52次浏览 已收录 0个评论

bom提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。

DOM与BOM的区别

DOM

  • 文档对象模型
  • DOM是把文档当作一个对象来看待
  • DOM的顶级对象是document
  • DOM主要学习的是操作页面元素

BOM

  • 浏览器对象模型
  • 把浏览器当作一个对象来看待
  • BOM的顶级对象是window
  • BOM主要学习浏览器窗口交互的一些对象
  • BOM是浏览器厂商在各自浏览器上定义的,兼容性较差

BOM是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

在调用的时候可以省略window,前面文章的对话框也都属于window对象方法,如alert()、prompt()等,它们的全称可以写成:window.btn.alert();


window对象的常见事件

窗口加载事件

window.onload = function(){}
或者
window.addEventListener("load",function(){});

传统注册方式

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发改事件(包括图像,js、css等),才去调用这个事件。

<!-- 这个js放在什么位置都可以,因为它是页面全部加载完才去执行这个事件 -->
    <script>
        window.onload=function(){
            var btn=document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击了');
            })
        }
    </script>
    <button>点击</button>
传统注册方式只能写一次,如果写多个,会以最后一个window.onload为准

方法监听注册方式(推荐)

<!-- 这个js放在什么位置都可以,因为它是页面全部加载完才去执行这个事件 -->
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击了');
        })               
    })
    </script>
    <button>点击</button>
方法监听注册方式可以注册多个监听器(处理函数)

DOMContentLoaded加载方式

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoad事件触发仅当DOM加载完成,不包括样式表、图片、flash等等,就已经触发了

如果页面的图片很多,从用户访问到onload触发可能需要很长时间,交互效果就不能实现,影响用户体验,所以此时用DOMContentLoaded事件合适
document.addEventListener('DOMContentLoaded',function(){
            alert('test');
        })

DOMContentLoaded与load执行顺序测试

<script>
        //load当网页内容完全加载完成才会执行里面的代码
        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);
            })
            // load 等页面内容全部加载完毕,包含页面dom元素 图片 flash  css 等等才会执行
            // DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
结果演示

调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

触发时就调用处理函数。利用这个事件可以完成响应式布局,window.innerWidth获得当前屏幕的宽度。

<script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('屏幕变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>

定时器

setTimeout()定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

在时间到期后执行调用函数,结束后不再调用了

setTimeout(function() {
            console.log('时间到了');
        }, 2000);


//第二种写法
        function callback() {
            console.log('到了');

        }
//给很多定时器加标识符
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);

清除定时器

window.clearTimeout(timer1)

它可以取消之前通过调用setTimeout()建立的定时器。

setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

它和setTimeout唯一不同的是可以重复调用一个函数,每个这个时间,就去调用一次回调函数。

清除定时器

window.clearInterval(timer1)

获取验证码案例

<script>
        // 按钮点击之后,会禁用 disabled 为true 
        // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的,因此需要用到定时器
        // 定义一个变量,在定时器里面,不断递减
        // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状
        var timedata=3;
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            btn.disabled=true;
            var h = setInterval(function(){
                if (timedata == 0) {
                    timedata = 3;
                    // 清除定时器和复原按钮
                    clearInterval(h);
                    btn.disabled=false;
                    btn.innerHTML = '获取验证码';
                } else {
                    btn.innerHTML = '还剩' + timedata + '秒';
                    timedata--;
                }
            },1000);
        })
    </script>
结果演示

倒计时案例

<script>
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');
        var inputTime = +new Date('2021-9-16 18:00:00');
        // 先调用一次这个函数,防止第一次刷新页面有空白
        countDown();
        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>
结果演示

回调函数

setTimeout()称为回调函数callback

普通函数时按照代码顺序直接调用,而回调函数,需要等待时间,时间到了才去调用这个函数,即回头调用的函数,上一件事干完,再头再用这个函数


location对象

window对象提供了一个location属性用户获取或设置窗体的URL,并且可以用来解析URL。这个属性返回的是一个对象。

location对象的属性

重点记住:href和search

 案例

5秒跳转案例

<script>
        var d=document.querySelector('div');
        var t=5;
        //消除空白
        fn();
        setInterval(fn,1000)
        function fn() { if (t == 0) {
                    window.location.href = 'https://demo.wangxuelong.vip/wxl/wxl.html';
                } else {
                    d.innerHTML = '您将在' + t + '秒后看到作者';
                    t--;
                }
            }
    </script>
结果演示

数据在不同页面的传递案例

login代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆</title>
</head>
<body>
    <form action="index.html">
       用户名: <input type="text" name='uname'>
       <input type="submit" value="提交">
    </form>
</body>
</html>

index代码

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div></div> -->
    <script>
        console.log(location.href);
        //先去掉? substr('起始位置',截取几个字符)
        var data=location.href.substr(1);//uname=名字
        //利用=把字符串分割为数组
        var arr=data.split('=');//['uname','名字']
        var d=document.querySelector('div');
        d.innerHTML=arr[1]+' 您好';
    </script>
<!-- </body>
</html> -->
结果演示

location对象的方法

location.assign('https://www.wangxuelong.vip');
assign和href会记录历史,即可以后退;true为强制刷新就是直接从服务器读取数据,而不是从缓存里读

navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,最常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值。前端代码就可以判断用户用哪个终端打开的页面,从而实现跳转。

<script>
       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 = "../H5/index.html"; //手机
       }
       // else{
       //     window.location.href = ""; //电脑
       // }
   </script>

history对象(OA办公系统会用)

这个对象可以与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口中)访问过的URL。

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:BOM浏览器对象模型
喜欢 (2)

您必须 登录 才能发表评论!