[JS-DOM BOM学习笔记]BOM那些儿事儿

学习要求

• 能够说出什么是BOM
• 能够知道浏览器的顶级对象window
• 能够写出页面加载事件以及注意事项
• 能够写出梁总定时器函数并说出区别
• 能够说出JS执行机制
• 能够使用location对象完成页面之间的跳转
• 能够知晓navigator对象涉及的属性
• 能够使用history提供的方法实现页面刷新

BOM概述

什么是BOM？

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分

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

BOM的构成

BOM比DOM更大，它包含DOM

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

• 1.它是JS访问浏览器窗口的一个接口
• 2.它是一个全局对象。定义在全局作用域中的变量，函数都会编程window对象的属性和方法，在调用的时候可以省略window，前面学习的对话框都属于window对象方法码如alert()，prompt()等

window对象的常见事件

窗口加载事件

window.onload

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

• 1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
• 2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
• 3.如果使用addEvenListener则没有限制

window.DOMContentLoaded

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
ie9以上才支持
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的事件。交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适
DOMContentLoaded是DOM加载完毕，加载速度比load更快一些

调整窗口大小事件

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

• 1.只要窗口大小发生像素变化，就会触发这个事件
• 2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div></div>
    <script>
        var div=document.querySelector('div')
        window.addEventListener('resize',function(){
            console.log(window.innerWidth);
            if(window.innerWidth<=800){
                div.style.display='none'
            }else{
                div.style.display='block'
            }
        })
    </script>

定时器

两种定时器

window对象给我们提供了2个非常好用的方法-定时器

• setTimeout()
• setInterval()

setTimeout()定时器

setTimeout(调用函数，时间)方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
这个函数我们也称为回调函数

停止setTimeout()定时器

window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

• window可以省略

    <button>stop</button>
    <script>
        function callback(){
            console.log('爆炸了');
        }
        var timer1=setTimeout(callback,3000)
        var timer2=setTimeout(callback,5000)
        var btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            clearTimeout(timer2)
        })
    </script>

setInterval()定时器

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

• 1.window可以省略
• 2.这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名()‘三种形式
• 3.间隔的毫秒数省略默认时0，如果写，必须时毫秒，表示每隔多少毫秒就自动调用这个函数
• 4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

倒计时案例

    <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('2021-6-1 18:00:00')
        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
            var m=parseInt(times/60%60)
            m=m<10?'0'+m:m
            var s=parseInt(times%60)
            s=s<10?'0'+s:s
            hour.innerHTML=h
            minute.innerHTML=m
            second.innerHTML=s
        }
    </script>

clearInterval()停止定时器

发送短信案例

    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn=document.querySelector('button')
        var time=10
        btn.addEventListener('click',function(){
            btn.disabled=true
            btn.innerHTML='还剩下'+time+'秒'
            time--
            var timer=setInterval(function(){
                if(time==0){
                    clearInterval(timer)
                    btn.disabled=false
                    btn.innerHTML='发送'
                    time=3
                }else{
                    btn.innerHTML='还剩下'+time+'秒'
                    time--
                }

            },1000)

        })
    </script>

this

this的指向在函数定义的时候时确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的时那个调用它的对象

• 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)