1 BOM简介

概念

BOM(Browser Object Model) 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window.

组成

Window 窗口对象
Window 对象表示浏览器中打开的窗口。
Navigator 浏览器对象
Navigator 对象包含有关浏览器的信息。
Screen 屏幕对象
Screen 对象包含有关客户端显示屏幕的信息。
History 历史记录对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
Location 地址栏对象
Location 对象包含有关当前 URL 的信息。

其实, BOM 比 DOM 更大, 它包含 DOM

操作原理

  将浏览器各个组成部分抽成对象,以面向的方式去操作,提高开发效率(对象有属性和方法,便于操作)

2 window对象

概念
窗口对象
方法
window 对象提供了 2 种定时器
setTimeout 定时一次用clearTimeout清除
setInterval 循环定时用clearInterval清除

1) setTimeout

语法

setTimeout(函数, ms时间);

当时间到了, 会执行函数. 只执行一次

<script>
        /*语法
            window.setTimeout(调用函数,延时时间)  在指定的毫秒数后执行指定代码。
            1,window可以省略
            2,延时时间是毫秒,可以省略,如果省略,默认是0
            3,调用函数,可以直接写函数,也可以写函数名,还可以'函数名()',不提倡
            4,页面中可能有很多个定时器,我们可以用变量来标识这些定时器
        */
       var timer1 = setTimeout(function(){
           console.log('时间到了');
       },2000)
       function fun(){
           console.log('爆炸了');
       }
       var timer2 = setTimeout(fun,3000)
       //setTimeout('fun()',5000) 不提倡这种写法
    </script>

<button>点击停止计时</button>
    <script>
        //设置定时
        var timer = setTimeout(function(){
            console.log('爆炸');
        },5000)
       var btn = document.querySelector('button')
       btn.addEventListener('click',function(){
           //停止定时
           clearTimeout(timer)
       })
    </script>

2) setInterval

语法

setInterval(函数, ms时间);

每隔一段时间, 执行一次函数. 会执行多次

<script>
 //setInterval(回调函数,间隔时间) 间隔指定的毫秒数不停地执行指定的代码
            setInterval(function(){
                console.log('循环爆炸');
            },2000)
            //它的使用跟 setTimeout 是一样的
            //区别
            //setTimeout  只执行一次
            //setInterval  循环执行
    </script>

3) clearInterval

通过clearInterval停止setInterval设置的定时器

 <button class="begin">开启定时</button>
 <button class="stop">结束定时</button>
    <script>
        //clearInterval() 
            //方法用于停止 setInterval() 方法执行的函数代码。
        //获取dom对象
         var begin = document.querySelector('.begin')
         var stop = document.querySelector('.stop')
         var timer = null;//全局的变量 null是一个空对象
         begin.addEventListener('click',function(){
            timer = setInterval(function(){
                 console.log('循环爆炸');
             },1000)
         })
         stop.addEventListener('click',function(){
             clearInterval(timer)
         })
    </script>

示例:

<body>
    手机号: <input type="text" /> <button>发送</button>
    <script>
        //获取按钮对象
        var btn = document.querySelector('button')
        //定义一个计数期
        var count = 3
        //添加点击事件
        btn.addEventListener('click',function(){
          //1,禁用按钮
          btn.disabled=true
          //2,启动定时器
          var timer = setInterval(function(){
            //4.当count的值减到0的时候,结束定时,恢复按钮的状态
            if(count <= 0){
                clearInterval(timer)
                btn.disabled=false
                btn.innerHTML='发送'
                count = 3  //将count重置为3,可以继续下一次使用
                return
            }
            //3,把倒计时的时间显示在按钮上
            btn.innerHTML = count + '秒后重试'
            count--
          },1000)
        })
    </script>
  </body>

3 location对象

概念
用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

什么是URL

URL(Uniform Resource Locator), 统一资源定位符

在计算机网络中, 可以通过统一资源定位符(URL)请求对应的服务器资源(Resource)

属性
location.href 获取
location.href = 新的url 跳转
方法
reload() 刷新

<button id="btn01">刷新</button>
<button id="btn02">去百度</button>
    <script>
        console.log(location);//href: "http://127.0.0.1:5502/17_BOM_location%E5%AF%B9%E8%B1%A1.html"
        console.log(location.href);//获取当前页面的url路径
        //reload方法 刷新当前页面
        var btn01 = document.querySelector('#btn01')
        btn01.addEventListener('click',function(){
            location.reload() //刷新
        })
        //location.href 跳转到指定页面
        var btn02 = document.querySelector('#btn02')
        btn02.addEventListener('click',function(){
            location.href='http://www.baidu.com'
        })
    </script>

4 history对象

1) 作用

history对象类似于浏览器的前进后退功能, 访问历史记录

2) 常用属性方法

属性方法	说明
back()	后退, 返回到上一次的访问的页面
forward()	前进
go(参数)	前进或后退, 1表示前进1个页面, -1表示后退一个页面

<body>
    <a href="./20_BOM_history对象02.html">跳转到下一页</a>
</body>

<button>返回上一页</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            //history.back()//回退到上一页,这与在浏览器中点击后退按钮是相同的
            //go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
            history.go(-1)
        })
    </script>

Web前端

JavaScript BOM