当前位置：网站首页>BOM学习

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当做一个对象来看待	把浏览器当做一个对象来看待
DOM的顶级对象是document	BOM的顶级对象是window
DOM主要学习的是操作页面元素	BOM学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2、BOM的构成

window对象是浏览器的顶级对象，具有双重角色。

1.它是JS访问浏览器窗口的一个接口。

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

<script>
        var num=10;
        console.log(num);
        console.log(window.num);

        function fn(){
            console.log(11);
        }
        fn();//结果输出11
        window.fn();//结果输出11
</script>

顶级对象window，在调用的时候可以省略，比如：alert,promt。

alert(11);
window.alert(11);

注意：window下的一个特殊属性window.name

二、window对象的常见事件

<button>点击</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('点击我');
        })
    </script>

window.load事件

window.onload = function( ) { } //传统方式
或
window.addEventListener ("load", function( ) { } );

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

注意：

1.有了window.load就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

2.window.load 传统注册事件方式只能写一次，如果有多个，会以最后一个window.load为准。

3.如果使用addEventListener则没有限制。

DOMContentLoaded事件

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

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

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

Onresize事件

window.onresize = function(){ alert('窗口被调整了大小'); }
window.addEventListener('resize',function(){ alert('窗口被调整了大小');})

当浏览器窗口大小更改的时候调用。window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

注意：

1.只要窗口大小发生像素变化，就会触发这个事件。

2.我们经常利用这个事件完成响应式布局。window.inner'Width当前屏幕的宽度.

三、定时器

window对象给我们提供了2种定时器： setTimeout( ) 和 setInterval( )

1.1 setTimeout( ) 定时器

定时器，在延迟多少毫秒执行函数，只执行一次。

window.setTimeout(调用的函数 , 延时的毫秒数,默认是0 ) ;

setTimeout( )方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

setTimeout( )这个调用函数我们也称为回调函数callback ，普通函数是按照代码顺序直接调用。

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

以前我们讲的element.οnclick=function( ){ }或者element.addEventListener(“click",fn);里面的函数也是回调函数。

注意：

1.window可以省略。

2.这个调用函数可以直接写凶数，或者写函数名或者采取字符串‘函数名0’三种形式。第三种不推荐

3.延迟的毫秒数省略默认是0，如果写，必须是毫秒。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

1.2 clearTimeout( ) 清除定时器

window.clearTimeout( timeout ID) ;

clearTimeout( ) 方法取消了先前通过调用setTimeout( )的定时器。

注意：window可以省略，里面参数就是定时器的标识符

2.1 setInterval( ) 定时器

概念：每隔一段时间，都调用回调函数。

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

setInterval( ) 方法重复调用一个函数，每隔这个时间就去调用一次回调函数。

注意：

1.window可以省略

2.这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名 ( )' 三种形式。

3.间隔的毫秒数省略默认是0，如果写，必须是毫秒。，表示每隔多少毫秒就自动调用这个函数。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

2.2 clearInterval( )清除定时器

window.clearInterval( Interval ID) ;

clearInterval( ) 方法取消了先前通过调用setInterval( )的定时器。

注意：window可以省略，里面参数就是定时器的标识符

setTimeout( ) 和 clearTimeout( )的应用案列

<script>
        //setTimeout 延迟多少毫秒后执行函数 仅执行一次
        //1000毫秒等于1秒
        var span=document.querySelector('span');
        var time1=setTimeout(function(){
            span.style.display='none';
        },5000)
        var time2=setTimeout(function(){
            alert('5s到了');
        },5000)

        //清除定时器
         clearTimeout(time1);
        //注意先设置定时器 才能设置清除

  </script>

左边图是未加定时器之前，5s后文字消失；右边图是加了定时器后，文字未消失。

setInterval( ) 和 Interval的应用案列

<script>
        var i=0;
        var myinterval=setInterval(function(){
            i++;
            console.log(i);
        },1000)
        setTimeout(function(){
            clearTimeout(myinterval);//清除定时器
        },6000)    //6s停止
    </script>

左边图是未加定时器之前，程序一直执行计时；右边图是加了定时器后，计时6s停止。

四、小练习

发送短信

<!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>Document</title>
</head>
<body>
    <input type="text">
    <input type="button" id="btn" value="发送信息">

    <script>
        var btn=document.querySelector('#btn');
        btn.onclick=function(){
            var time=5;      //设置5s倒计时
            var setTime=setInterval(function(){
                            if(time==0){
                                //清除定时器，不清除会出现bug
                                clearInterval(setTime);
                                btn.disabled=false;
                                btn.value='发送消息';
                            }else{
                                //禁用按钮
                                btn.disabled=true;
                                btn.value='还剩下'+time+'秒';
                                time--;
                            }
                        },1000)
            
        }
    </script>
</body>
</html>

活动倒计时

<!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>Document</title>
</head>
<body>
    <!-- 活动倒计时 -->
    <p>距离活动还剩<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    <script>
    function showTime(){
        var span=document.querySelectorAll('span');
        //设置活动截止时间
        var endTime=new Date('2022-07-02 12:00:00').getTime();
        //console.log(endTime);
        var newTime=new Date().getTime();
        //获得现在到活动截止时 相差的秒数
        var diffTime=(endTime-newTime)/1000;
        //console.log(diffTime);

        var day=parseInt(diffTime/60/60/24);
        //console.log(day);
        var hours=parseInt(diffTime/60/60%24);
        var minutes=parseInt(diffTime/60%60);
        var seconds=parseInt(diffTime%60);
        span[0].innerText=day;
        span[1].innerText=hours;
        span[2].innerText=minutes;
        span[3].innerText=seconds;
    }

    setInterval(showTime,1000)

    </script>
</body>
</html>