BOM

什么是BOM

BOM，Browser Object Model,即浏览器对象模型

其实就是操作浏览器的一些能力，我们可以操作：

• 获取一些浏览器的相关信息（窗口的大小）
• 操作浏览器进行页面跳转
• 获取当前浏览器地址栏的信息
• 操作浏览器的滚动条
• 浏览器的信息（浏览器的版本）
• 让浏览器出现一个弹出框（alert/confirm/propmt）
• BOM的核心就是 window 对象
• window是浏览器内置的一个对象，里面包含着操作浏览器的方法

javascrit的三部分组成

ECMASCRIPT      javascript语法

BOM             浏览器对象模型

DOM             文档对象模型

   BOM

作用：操作浏览器的能力

window对象 浏览器窗口对象

   ==> 创建window

                系统创建

        ==> 属性和方法

                history 子对象 -> 历史记录对象

                location 子对象 -> 地址栏对象(位置对象)

                document 子对象 -> 文档对象 html文档  (重点学习)

                navigator  包含浏览相关信息

                screen   用户屏幕相关属性

            常用方法

            alert()     信息提示框

            confirm()   信息确认框

            prompt()    信息输入框

            window.alert()

                =>使用window根对象属性或方法时，window对象可以省略

       function test1(){
            // window.alert('今天是周四！')
            // alert('这也可以的')
            var isOk = window.confirm('确定要离开吗？')
            // document.write('isOk ',isOk);
            if(isOk){
                alert('再见')
            }else{
                alert('真好')
            }
        }
        // test1()
     function test2(){
          var score =  window.prompt('请输入你的成绩！')
          var newScore = Number(score) + 10
          alert(newScore)
      }
      // test2()

            open() 打开浏览器窗口

                open(url,窗口名称，参数)

                close()

     function test3(){
        open('http://ww.baidu.com','百度','')
        }

        

        // test3()

            定时器

            setTimeout()  倒计时定时器

            setInterval()  循环定时器

            语法：

                var timer = window.setTimeout(function(){

                    //定时器执行代码

                }，1000)

                clearTimeout(timer) //清除定时器

      function test4(){
            window.setTimeout(function(){
            document.write('今天天气好多了')
        },2000)
     }
        // test4()

     function test5(){
         var n = 0
      // var m = 0
         var timer =  window.setInterval(function(){
         document.write(n++,'<br>')
             if(n > 20){
                 clearInterval(timer)
             }
         },1000)
    }
        test5()

history

            作用：操作历史记录

            操作对象：

                window.history

            方法和属性

                back()   后退

                forwqrd()   前进

                go() gp(-1)  go(1)

location

            位置对象/地址栏对象

            刷新  url地址栏输入框

            window.location

            方法和属性

            href属性

                location.href

                    => 获取当前页面的url地址

                    => 设置url 跳转url地址对应页面

            方法

                reload() 刷新界面

浏览器窗口尺寸

            innerHeight

            innerWidth

      <button onclick="setTop(500)">设置顶部</button>
        <h2>滚动事件属性</h2>
        <div></div>
        <script>
            window.onscroll = function(){
                // console.log('scrollTop:', document.documentElement.scrollTop);
                // console.log('body', document.body.scrollTop);
                var scrollTop = getScroll()
                console.log(scrollTop);
            }
            //兼容性处理
            function getScroll(){
                // 逻辑或， 前面有值（true）直接返回，否则返回后面的值
                return document.documentElement.scrollTop || document.body.scrollTop
            }
            function setTop(top){
                if(!document.documentElement.scrollTop){
                    document.documentElement.scrollTop = top
                }else{
                   document.body.scrollTop = top
               }
            }