浏览器对象模型BOM

window对象

是当前JS脚本运行所处的窗口，该窗口中包含DOM
有标签页功能的浏览器,其每个标签页对应不同的window对象

全局变量是window的属性

var a=10；
console.log（window.a==a）；//true

意味着：多个js文件间共享全局作用域，即js文件无作用域隔离功能

内置函数是window的方法

例如：setlnterval、alert等

console.log（window.alert==alert）；//true 
console.log（window.setInterval==setInterval）；//true

属性-窗口尺寸

属性	意义
innerHeight	浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
innerwidth	浏览器窗口的内容区域的宽度，包含垂直滚动条（如果有的话）
clientWidth	浏览器窗口的内容区域的宽度，不包含垂直滚动条
outerHeight	浏览器窗口的外部高度
outerwidth	浏览器窗口的外部宽度
scrollY	垂直方向已滚动的像素值
scrolITop	到当前页面顶部的像素值

考虑兼容性这样用
var scrollTop = window.scrollY || document.documentElement.scrollTop;

事件-resize

窗口大小改变之后，就会触发；

事件-scroll

在窗口被卷动之后，就会触发scroll事件
可以使用window.onscroll或者window.addEventListener（'scroll"）来绑定事件处理函数

Navigator对象

window.navigator 属性可以检索navigator对象
其内部含有用户此次活动的浏览器的相关属性和标识

属性	意义
appName	浏览器官方名称
appVersion	浏览器版本
userAgent	浏览器的用户代理（含有内核信息和封装壳信息）
platform	用户操作系统

History 对象

提供了操作浏览器会话历史的接口
常用操作：模拟点击浏览器回退按钮，两种写法如下：

history.back;
history.go(-1);

Location 对象

标识当前所在网址
给该属性赋值可使浏览器跳转页面

window.location = 'http://www.baidu.com';
window.location.href = 'http://www.baidu.com';

reload()

重新加载当前页面
参数true表示强制从服务器强制加载
GET请求查询参数
学完ajax再来理解

属性-search

为当前浏览器的GET请求查询参数
比如：https://www.imooc.com/？a=1&b=2

console.1og（window.location.search）；//"？a=1&b=2"

BOM特效开发-返回顶部按钮

原理：定时器驱动更改 scrollTop属性

<style>
    body {
        height: 5000px;
        background-image: linear-gradient(to bottom, blue, green, yellow);
    }

    .backtotop {
        width: 60px;
        height: 60px;
        background-color: rgba(255, 255, 255, .6);
        position: fixed;
        bottom: 100px;
        right: 100px;
        /* 小手状 */
        cursor: pointer;
    }
</style>
<div class="backtotop" id="backtotopBtn">返回顶部</div>

<script>
    var backtotopBtn = document.getElementById('backtotopBtn');

    var timer;
    backtotopBtn.onclick = function () {
        //设表先关:防止定时器叠加
        clearInterval(timer);

       
        timer = setInterval(function () {
            document.documentElement.scrollTop -= 200;
            //功能: 阻止不停自动向上拉动;
            if (document.documentElement.scrollTop <= 0) {
                clearInterval(timer);
            }
        }, 20);
    };
    // 功能:页面未卷动隐藏按钮,卷动显示按钮
	window.onscroll = function () {
	   var scrollTop = document.documentElement.scrollTop || window.scrollY;
	   if (scrollTop == 0) {
	     backtotop.style.display = "none";
	   } else {
	     backtotop.style.display = "block";
	   }
	 };

</script>

BOM特效开发-楼层导航

原理：offsetTop属性-此元素到定位祖先元素的垂直距离

 <style>
     * {
         margin: 0;
         padding: 0;
     }

     .content-part {
         width: 1000px;
         margin: 0px auto;
         margin-bottom: 30px;
         background-color: #ccc;
         font-size: 50px;
     }

     .floornav {
         position: fixed;
         right: 40px;
         top: 50%;
         margin-top: -100px;
         width: 120px;
         height: 200px;
         background-color: orange;
     }

     .floornav ul {
         list-style: none;
     }

     .floornav ul li {
         width: 120px;
         height: 40px;
         line-height: 40px;
         text-align: center;
         font-size: 26px;
         /* 小手指针 */
         cursor: pointer;
     }

     .floornav ul li.current {
         background: purple;
         color: white;
     }
 </style>

 <nav class="floornav">
     <ul id="list">
         <li data-n="科技" class="current">科技</li>
         <li data-n="体育">体育</li>
         <li data-n="新闻">新闻</li>
         <li data-n="娱乐">娱乐</li>
         <li data-n="视频">视频</li>
     </ul>
 </nav>
<section class="content-part" style="height: 674px" data-n="科技">
  科技栏目
</section>
<section class="content-part" style="height: 567px" data-n="体育">
  体育栏目
</section>
<section class="content-part" style="height: 739px" data-n="新闻">
  新闻栏目
</section>
<section class="content-part" style="height: 574px" data-n="娱乐">
  娱乐栏目
</section>
<section class="content-part" style="height: 1294px" data-n="视频">
  视频栏目
</section>
<script>
  var list = document.getElementById("list");
  var contentParts = document.querySelectorAll(".content-part");
  var lis = document.querySelectorAll("#list li");

  list.onclick = function (e) {
    if (e.target.tagName.toLowerCase() == "li") {
      var n = e.target.getAttribute("data-n");

      var contentPart = document.querySelector(
        ".content-part[data-n=" + n + "]"
      );

      document.documentElement.scrollTop = contentPart.offsetTop;
    }
  };

  var offsetTopArr = [];

  // contentPart净位置存入数组
  for (var i = 0; i < contentParts.length; i++) {
    offsetTopArr.push(contentParts[i].offsetTop);
  }
  // 最后一项参与比较-推入无穷大
  offsetTopArr.push(Infinity);

  var nowfloor = -1;

  window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop;

    for (var i = 0; i < offsetTopArr.length; i++) {
      // 检测scrollTop值在哪两楼层间
      if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {
        break;
      }
    }
    // 退出循环时，i是几,当前楼层就是几
    // 若当前楼层不是i，则换楼了
    if (nowfloor != i) {
      console.log(i);
      nowfloor = i;

      // 当前楼层加current类名
      for (var j = 0; j < lis.length; j++) {
        if (j == i) {
          lis[j].className = "current";
        } else {
          lis[j].className = "";
        }
      }
    }
  };
</script>