10-JavaScript-BOM

什么是BOM

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

Navigator

• 通过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浏览器");
      }
  

Location

• 获取当前地址栏地址:window.location.href
• 重新加载页面:window.location.reload();
• 强制刷新页面:window.location.reload(true);

History

• 前进:window.history.forward();/window.history.go(正数);
• 后退:window.history.back();/window.history.go(负数);
• 刷新:window.history.go(0);

获取元素宽高其他方式

• 通过getComputedStyle获取宽高
  • 获取的宽高不包括边框和内边距
  • 既可以获取行内设置的宽高也可以获取CSS设置的宽高
  • 只支持获取,不支持设置
  • 只支持IE9及以上浏览器
• 通过currentStyle获取宽高
  • 特点和getComputedStyle一样
  • 但是一个支持高级浏览器一个支持低级浏览器
• 通过style属性获取宽高
  • 获取的宽高不包括边框和内边距
  • 只能获取行内设置的宽高,不能获取CSS设置的宽高
  • 可以获取也可以设置
  • 高级低级浏览器都支持
• 通过offsetWidth和offsetHeight
  • 获取的宽高包括边框和内边距
  • 既可以获取行内设置的宽高也可以获取CSS设置的宽高
  • 只支持获取,不支持设置
  • 低级高级浏览器都支持

获取元素位置的其他方式

• offsetLeft和offsetTop
  • 获取元素到第一个定位祖先元素之间的偏移位
  • 如果没有祖先元素是定位的,那么就是获取到距离body的偏移位
• offsetParent
  • 获取元素的第一个定位祖先元素
  • 如果没有祖先元素是定位的,那么就是获取到的就是body
• clientLeft和clientTop
  • 获取到的是左边框和顶部边框的宽度
• clientWidth和clientHeight
  • 获取到的是宽度/高度+内边距

scroll相关属性

• 内容没有超出元素范围时
  • scrollWidth = 元素宽度 + 内边距宽度 = clientWidth
  • scrollHeight = 元素高度 + 内边距高度 = clientHeight
• 内容超出元素范围时
  • scrollWidth = 元素宽度 + 内边距宽度 + 超出宽度
  • scrollHeight = 元素高度 + 内边距高度 + 超出高度
• scrollTop:内容往上滚动,移出内边距顶部的部分
• scrollLeft:内容水平滚动,移出内边距最左边的部分

获取网页宽高

• innerWidth/innerHeight:只能在IE9及IE9以上的浏览器中才能获取

• document.documentElement.clientWidth/document.documentElement.clientHeight:可以用于在IE9以下的浏览器的标准模式中获取

  • 浏览器在渲染网页的时候有两种模式,"标准模式"和"怪异模式/混杂模式"
  • 默认情况下都是以标准模式来进行渲染的
  • 如果网页没有书写文档声明,那么就会按照"混杂模式/怪异模式"来进行渲染

• document.body.clientWidth/document.body.clientHeight:用于在混杂模式中获取可视区域的宽高

  //兼容
  function getScreen(){
      let width,height;
      if(window.innerWidth){
          width = window.innerWidth;
          height = window.innerHeight;
      }else if(document.compatMode === "BackCompat"){
          width = document.body.clientWdith;
          height = document.body.clientHeight;
      }else{
          width = document.documentElement.clientWidth;
          height = document.documentElement.clientHeight;
      }
      return{
          width:width,
          height:height
      }
  }
  

获取网页滚动距离

• IE9及以上浏览器:window.pageXOffset/window.pageYoffset

• 标准模式下浏览器:document.documentElement.scrollLeft/document.documentElement.scrollTop

• 混杂(怪异)模式下浏览器:document.body.scrollLeft/document.body.scrollTop

  //兼容
  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
      }
  }
  

函数防抖与节流

• 函数防抖

  • 是优化高频率执行js代码的一种手段
  • 可以让被调用的函数在一次连续的高频操作过程中只被调用一次
  • 减少代码执行次数,提升网页性能
  • 应用场景:oninput/onmousemove/onscroll/onresize

  let timerId = null;
  元素.oninput = function(){
      timerId && clearInterval(timerId);
      timerId = setTimeout(function(){
          需要执行的代码;
      },1000);
  }