JavaScript中BOM0730

JavaScript中BOM

1.基本概念

1.1什么是BOM?

• DOM就是一套操作HTML标签的API(接口/方法/属性)
• BOM就是一套操作浏览器的API(接口/方法/属性)

1.2.BOM中常见的对象

• window: 代表整个浏览器窗口, 注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
• Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
• Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
• History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步, 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
• Screen: 代表用户的屏幕信息

2. Navigato

• // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
  // console.log(window.navigator);
  //useragent是其中的一个属性
  var agent = window.navigator.userAgent;
  if(/chrome/i.test(agent)){
      alert("当前是谷歌浏览器");
  }else if(/firefox/i.test(agent)){
      alert("当前是火狐浏览器");
  }else if(/msie/i.test(agent)){
      alert("当前是低级IE浏览器");
  }else if("ActiveXObject" in window){
      alert("当前是高级IE浏览器");
  }
  

3.Location

• // Location:  代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
  
  
  // 获取当前地址栏的地址
  oBtn1.onclick = function(){
      console.log(window.location.href);
  }
  // 设置当前地址栏的地址
  oBtn2.onclick = function(){
      window.location.href = "http://www.it666.com";
  }
  // 重新加载界面
  oBtn3.onclick = function(){
      window.location.reload();
  }
  oBtn4.onclick = function(){
      window.location.reload(true);
  }
  

4. History

• // History:   代表浏览器的历史信息, 通过History来实现刷新/前进/后退
  // 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
  let oBtn1 = document.querySelector("#btn1");
  let oBtn2 = document.querySelector("#btn2");
  // 前进
  /*
  注意点:
  只有当前访问过其它的界面, 才能通过forward/go方法前进
  如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
  */
  oBtn1.onclick = function () {
      // window.history.forward();
      window.history.go(1);
  }
  // 刷新
  // 如果给go方法传递0, 就代表刷新
  oBtn2.onclick = function () {
      window.history.go(0);
  }
  // 后退
  /*
  注意点:
  只有当前访问过其它的界面, back/go方法后退
  如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
  */
   oBtn1.onclick = function () {
       // window.history.back();
       window.history.go(-1);
   }
  

5.获取元素宽高的方法以及偏移位等

5.1 获取偏移位

• /*
  1.offsetLeft和offsetTop作用
  获取元素到最近祖先元素之间的偏移位
  如果没有祖先元素是定位的, 那么就是获取到body的偏移位
  */
  let oSDiv = document.querySelector(".son");
  oSDiv.onclick = function () {
      console.log(oSDiv.offsetLeft);
      console.log(oSDiv.offsetTop);
  }
  

  5.2获取宽高

• /*
  1.通过getComputedStyle获取宽高
  1.1获取的宽高不包括 边框和内边距
  1.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
  1.3只支持获取, 不支持设置
  1.4只支持IE9及以上浏览器
  */
  
  var oDiv = document.getElementById("box");
  // oDiv.style.width = "166px";
  // oDiv.style.height = "166px";
  var style = getComputedStyle(oDiv);
  // style.width = "166px"; 设置
  // style.height = "166px";
  console.log(style.width);//获取
  console.log(style.height);
  
  
  /*
  2.通过currentStyle属性获取宽高
  2.1获取的宽高不包括 边框和内边距
  2.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
  2.3只支持获取, 不支持设置
  2.4只支持IE9以下浏览器
  */
  
  var oDiv = document.getElementById("box");
  // oDiv.style.width = "166px";
  // oDiv.style.height = "166px";
  var style = oDiv.currentStyle;
  style.width = "166px";
  style.height = "166px";
  // console.log(style);
  console.log(style.width);
  console.log(style.height);
  
  
  /*
  3.通过style属性获取宽高
  3.1获取的宽高不包括 边框和内边距
  3.2只能获取内设置的宽高, 不能获取CSS设置的宽高
  3.3可以获取也可以设置
  3.4高级低级浏览器都支持
  */
  
  var oDiv = document.getElementById("box");
  oDiv.style.width = "166px";
  oDiv.style.height = "166px";
  console.log(oDiv.style.width);
  console.log(oDiv.style.height);
  
  
  /*
  4.offsetWidth和offsetHeight
  4.1获取的宽高包含 边框 + 内边距 + 元素宽高
  4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
  4.3只支持获取, 不支持设置
  4.4高级低级浏览器都支持
  */
  
  var oDiv = document.getElementById("box");
  // oDiv.offsetWidth = "166px";
  // oDiv.offsetHeight = "166px";
  oDiv.style.width = "166px";
  oDiv.style.height = "166px";
  console.log(oDiv.offsetWidth);
  console.log(oDiv.offsetHeight);
  
  
  /*
  1.getComputedStyle/currentStyle/style
  获取的宽高不包括 边框和内边距
  2.offsetWidth/offsetHeight
  获取的宽高包括 边框和内边距
  
  3.getComputedStyle/currentStyle/offsetXXX
  只支持获取, 不支持设置
  4.style
  可以获取, 也可以设置
  
  5.getComputedStyle/currentStyle/offsetXXX
  即可以获取行内,也可以获取外链和内联样式
  6.style
  只能获取行内样式
  */
  

5.3 获取定位父元素

• /*1.offsetParent作用
  获取元素的第一个定位祖先元素
  如果没有祖先元素是定位的, 那么就是获取到的就是body
  */
  let oSDiv = document.querySelector(".son");
  oSDiv.onclick = function () {
      console.log(oSDiv.offsetParent);
  }
  

6.client属性

•  /*
   1.offsetWidth = 宽度 + 内边距 + 边框
    offsetHeight = 高度 + 内边距 + 边框
   2.clientWidth = 宽度 + 内边距
    clientHeight = 高度 + 内边距
   */
   let oDiv = document.querySelector("div");
   // console.log(oDiv.clientWidth);
   // console.log(oDiv.clientHeight);
  
   /*
   1.offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body
   2.clientLeft/clientTop: 左边框 和 顶部边框
   */
   console.log(oDiv.clientLeft);
   console.log(oDiv.clientTop);
   oDiv.scrollWidth
  

7.scroll属性

•  /*
  1.内容没有超出元素范围时
  scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
  scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
  */
  let oDiv = document.querySelector("div");
  // console.log(oDiv.scrollWidth);
  // console.log(oDiv.scrollHeight);
  /*
  2.内容超出元素范围时
  scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
  scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
  */
  
  /*
  3.scrollTop / scrollLeft
  scrollTop: 超出元素内边距顶部的距离,比如滚动网页滚出去的部分
  scrollLeft: 超出元素内边距左边的距离
  */
  // console.log(oDiv.scrollTop);
  oDiv.onscroll = function () {
      console.log(oDiv.scrollTop);
  }
  

8. 获取网页宽高

•  /*
   注意点: innerWidth/innerHeight只能在IE9以及IE9以上的浏览器中才能获取
   console.log(window.innerWidth);
   console.log(window.innerHeight);
  */
  <-------------------------------------------->
  /*
  注意点: documentElement.clientWidth/documentElement.clientHeight
  可以用于在IE9以下的浏览器的标准模式中获取
  浏览器在渲染网页的时候有两种模式"标准模式"/"混杂模式/怪异模式"
  默认情况下都是以标准模式来进行渲染的(CSS1Compat)
  如果网页没有书写文档声明, 那么就会按照"混杂模式/怪异模式"来进行渲染的(BackCompat)
  混杂模式就是没有写最上面那一行<!DOCTYPE html>
   documentElement  --> HTML  --> 整个网页
  */
  <-------------------------------------------->
  /*
  // console.log(document.documentElement);
  // console.log(document.documentElement.clientWidth);
  // console.log(document.documentElement.clientHeight);
  */
  <----------------------------------------------->
  // 注意点: 在混杂模式中利用如下的方式获取可视区域的宽高
  // console.log(document.compatMode);// CSS1Compat
  // console.log(document.body.clientWidth);
  // console.log(document.body.clientHeight);
  */
  
  //综上所述 我们来封装一个获取网页宽高的函数
  let {width, height} = getScreen();
  console.log(width);
  console.log(height);
  
  function getScreen() {
      let width, height;
      if(window.innerWidth){
          width = window.innerWidth;
          height = window.innerHeight;
      }else if(document.compatMode === "BackCompat"){
          width = document.body.clientWidth;
          height = document.body.clientHeight;
      }else{
          width = document.documentElement.clientWidth;
          height = document.documentElement.clientHeight;
      }
      return {
          width: width,
          height: height
      }
  }
  

9.获取网页滚动距离

• window.onscroll = function () {
      // 1.IE9以及IE9以上的浏览器
      // console.log(window.pageXOffset);
      // console.log(window.pageYOffset);
  
      // 2.标准模式下浏览器
      // console.log(document.documentElement.scrollTop);
      // console.log(document.documentElement.scrollLeft);
  
      // 3.混杂(怪异)模式下浏览器
      // console.log(document.body.scrollTop);
      // console.log(document.body.scrollLeft);
  
      let {x, y} = getPageScroll();
      console.log(x, y);
    //封装一个获取网页滚动距离的函数
      function getPageScroll() {
          let x, y;
          if(window.pageXOffset){
              x = window.pageXOffset;
              y = window.pageYOffset;
          }else if(document.compatMode === "BackCompat"){
              x = document.body.scrollLeft;
              y = document.body.scrollTop;
          }else{
              x = document.documentElement.scrollLeft;
              y = document.documentElement.scrollTop;
          }
          return {
              x: x,
              y: y
          }
      }
  }
  
  

9.练习

• 星空背景 弹性导航 百度登录 大图展示 跟随广告 吸顶效果 返回顶部 楼层效果 橱窗效果

• 收获

  •  window.scrollTo(x, y);
    // x表示让网页在水平方向滚动到什么位置
    // y表示让网页在垂直方向滚动到什么位置
    
    //注意点: 通过documentElement.scrollTop来实现网页滚动, 在设置值的时候不能添加单位
    
    

10.函数防抖

• /*
  1.什么是函数防抖[debounce]?
  函数防抖是优化高频率执行js代码的一种手段
  可以让被调用的函数在一次连续的高频操作过程中只被调用一次
  
  2.函数防抖作用
  减少代码执行次数, 提升网页性能
  
  3.函数防抖应用场景
  oninput / onmousemove  / onscroll / onresize等事件
  */
  let oInput = document.querySelector("input");
  let timerId = null;
  // abc
  oInput.oninput = function () {
      timerId && clearTimeout(timerId);
      timerId = setTimeout(function () {
          console.log("发送网络请求");
      }, 1000);
      // console.log(this.value);
      // console.log("发送网络请求");
  }
  

10.1 函数防抖的封装

•  function debounce(fn, delay) { // fn = test
      let timerId = null;
      return function () {
          let self = this;//使得我外面传进来的函数this和debounce的this相同
          let args = arguments;// 外面的函数可以得到event事件
          timerId && clearTimeout(timerId);
          timerId = setTimeout(function () {
              // console.log("发送网络请求");
             // 以下操作将回调函数的this改为当前调用该函数的元素,同时也能够获取到如event事件等
              fn.apply(self, args);
          }, delay || 1000);
      }
  }
   oInput.oninput = debounce(function (event) {
       console.log("发送网络请求");
       console.log(this);
       console.log(event);
   }, 5000);
  

10.2 练习(令div的宽高为可视区域的一半)

• let oDiv = document.querySelector("div");
  function resetSize(){
      let {width, height} = getScreen();
      oDiv.style.width = width / 2 + "px";
      oDiv.style.height = height / 2 + "px";
  }
  resetSize();
  // 监听可视区域尺寸的变化 onresize
  window.onresize = debounce(function () {
      resetSize();
      console.log("尺寸的变化");
  }, 1000);
  
  

这个练习存在着一定的问题,虽然性能提升但是用户体验不好,因为只有在可视区域尺寸变化完后div才会变,为此引出函数节流

11 函数节流

•   /*
  1.什么是函数节流[throttle]?
  函数节流也是优化高频率执行js代码的一种手段
  可以减少高频调用函数的执行次数
  
  2.函数节流作用
  减少代码执行次数, 提升网页性能
  
  3.函数节流应用场景
  oninput / onmousemove  / onscroll / onresize等事件
  
  4.函数节流和函数防抖区别
  函数节流是减少连续的高频操作函数执行次数  (例如连续调用10次, 可能只执行3-4次)
  函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)
  */
  
  let oDiv = document.querySelector("div");
  function resetSize(){
      let {width, height} = getScreen();
      oDiv.style.width = width / 2 + "px";
      oDiv.style.height = height / 2 + "px";
  }
  resetSize();
  // 监听可视区域尺寸的变化
  let timerId = null;
  let flag = true;
  window.onresize = function () {
      //设置flag后,当第一次进来的时候以下为false,会执行后边的代码,将flag修改为true,同时开启定时器,
    //而第二次进来的时候由于flag是false,会直接return,直到定时器时间到后执行定时器里边的内容同时修改flag
    //才会再次执行if后边的语句
      if(!flag){ // if(false) if(true) if(false)
          return;
      }
      flag = false;
      timerId && clearTimeout(timerId);
      timerId = setTimeout(function () {
          flag = true;
          resetSize();
          console.log("尺寸的变化");
      }, 500);
  }
  

11.1 函数节流的封装(对比函数防抖)

• function throttle(fn, delay) { // fn = test
      let timerId = null;
      let flag = true;
      return function () {
          if(!flag) return;
          flag = false;
          let self = this;
          let args = arguments;
          timerId && clearTimeout(timerId);
          timerId = setTimeout(function () {
              flag = true;
              fn.apply(self, args);
          }, delay || 1000);
      }
  }
  

12. 瀑布流和视频播放器