JavaScript中的BOM--浏览器对象模型

BOM浏览器对象模型

• 概念：提供我们操作浏览器的能力

• 浏览器窗口对象 ：window 核心对象

  • 创建方式：系统自动创建

  • 属性和方法

  • window特殊属性 - window子对象

    • history	历史对象
      location	位置
      navigator	包含浏览器相关信息
      screen	用户显示屏幕相关属性
      document	文档对象

       var history =  window.history
      history.go()
      

常用方法

弹框相关

alert（）	信息提示框（弹出消息）
confirm()	信息确认框 (弹出两个选项)
prompt()	信息输入框 （弹出获取输入框）

• alert（）：信息提示框

  • 注意事项：window对象属性调用方法的时候可以不加window

• confirm() ;信息确认框

  • 数据类型：布尔值
  • 两个选项卡
    • 确定==>true
    • 取消==>flase

• prompt(): 信息输入框

  • 确定 输入框内容
    • 数据类型：字符串：string
  • 取消： null

打开和关闭网页

• open（“网址”）：打开指定网页

• close（）：关闭当前网页

    		//消息确认框获取
    	    var isok =  confirm('是否确认')
          if(isok){
          // open('https://www.baidu.com/')
          close()
  
          }else{
              alert('点击确认才能打开')
          }
  

定时器

• 执行一次：setTimeout()

  • 只是倒计时1次

         var timer = setTimeout(function(){
              console.log('2秒我就出现');
          },2000)  //倒计时2000（2秒倒计时）
  

• 循环执行：setInterval（）

  • 循环计时1秒钟执行一次（循环）

          var count = 1		//写在循环函数外面，才不会重复定义
          var timeOut = setInterval(function(){
              count++			//让计数器加1
              console.log(count);
              if(count==5){	//设置计数器的结束值
                  clearTimeout(timeOut)   //<结束计时器>
              }
          },1000)  //每一秒执行一次1000（1秒）
  

• 结束记时间：clearTimeout(循环计时函数)

​

滚动事件

• window.onscroll:监测滚动条是否滚动

          window.onscroll = function(){
              console.log('d1'+document.documentElement.scrollTop);
              console.log('d2'+document.body.scrollTop)
              console.log('滚动了');
          }
  d1200
  bom.html:89 d20
  bom.html:90 滚动了
  

• 概念：滚动距离实际时页面文档卷入的高度 == 滚动条距离顶部高度

• document.documentElement.scrollTop

• 兼容写法：document.body.scrollTop 没有DOCTYPE声明时用

• 示例：点击回到顶部

    //css部分
	<style>
        div{
            width: 1000px;
            height: 18000px;
            background-color: skyblue;
        }
        button{
            position: fixed; //设置固定定位
            left: 100px;
            top: 100px;
        }
    </style>
    
	//script部分
	<script>
    function put(){
        document.documentElement.scrollTop = 0
    }
    </script>

	//body部分
	<button onclick="put()">回到顶部</button> //使用onclick = 'put()'点击事件

• 例题延申：平滑回到顶部

  function put() {
      var topWindow = document.documentElement.scrollTop  //获取顶部的距离
      console.log(typeof topWindow)                       //number
      //设置一个循环计时器
      var timer = setInterval(function () {
          //计时器结束条件
          if (topWindow <= 0) {   //当顶部距离小于等于0时结束timer
              clearTimeout(timer) //结束计时器
          }
          topWindow = topWindow - 500  //每一次循环减去500
          document.documentElement.scrollTop =topWindow   //再把每次减去的值赋值给他
  
      }, 50)
      }