Javascript——操作BOM的API

• 了解BOM

  • BOM (Browser Object Model) 是浏览器对象模型
  • 浏览器提供了一套可使用 JS 操作浏览器窗口的属性与方法
  • BOM 的顶级对象是 window，每个页面就有一个 window ，所有全局变量页都定义在 window 下
  • 操作 BOM 相关API 都是以 window.xxx格式，一般可省略 window

• 浏览器可视窗口大小操作API(包含滚动条尺寸)

  可视窗口的宽度：window.innerWidth
  可视窗口的高度：window.innerHeight
  
  返回值是当前浏览器窗口可视区域的大小

  

• 浏览器弹出层API(可在浏览器弹出一个弹窗显示一些信息)

• 警告提示框弹出层

  • 特点：弹出一个警告提示框，提示框内显示一些文本，并且有一个确定按钮

  语法：window.alert('提示文本会变量')
  返回值：点击确定后，返回 undefined

  

• 选择提示框弹出层

  • 特点：弹出一个选择提示框，提示框内显示一些文本，并且有一个确定按钮和一个取消按钮

  语法：window.confirm('提示文本会变量')
  返回值：点击确定后，返回 true，点击取消后，返回 false

  

• 输入提示框弹出层

  • 特点：弹出一个输入提示框，提示框内显示一些文本，并且有一个确定按钮和一个取消按钮，还有一个输入框

  语法：window.prompt('提示文本会变量')
  返回值：输入框内有内容，点击确定返回输入框内的内容，输入框内无内容，点击确定按钮返回值空字符串，输入框无论是否有内容，点击取消返回值都是null

  

• 三种弹出层存在的共性：弹出层都会阻断程序的执行，只有等待用户操作后才会继续进行执行后续代码层序

• 地址栏API

• 浏览器地址栏地址构成部分
  

  • 传输协议：如http、https、ftp等
  • 域名(服务器地址)：如www.baidu.com
  • 查询字符串(打开网页携带的信息)：如?fr=aladdin#4
  • 哈希(锚点定位)：如#4

• 网页地址栏信息对象——location对象

  • 获取和设置地址栏地址

  获取地址栏地址语法：window.location.href
  返回值：当前网页地址栏地址
  
  设置跳转地址：window.location.href='跳转页面地址'
  window.location.href="https://www.baidu.com"

  • 获取和设置地址栏中的查询字符串

  获取地址栏地址语法：window.location.search
  返回值：当前网页地址栏地址的查询字符串
  
  设置地址栏的查询字符串：window.location.search='查询字符串'
  window.location.search="fr=aladin"

  • 获取和设置地址栏中的哈希值

  获取地址栏地址语法：window.location.hash
  返回值：当前网页地址栏地址的哈希值
  
  设置地址栏的查询字符串：window.location.search='哈希值'
  window.location.search="4"

  • 页面刷新

  设置属性：window.location.reload()
  需要写在限制条件内，如果不写在限制条件内会导致浏览器崩溃

• 浏览器历史记录API——history对象

  • 回退到上一个网页操作：window.history.back()
  • 前进到下一个网页操作：window.history.forward()

  • 包含回退、刷新、前进操作：window.history.go(整数)

    • 正整数表示前进，2以上表示多级前进；0 表示刷新；负整数表示回退，-2以上表示多级回退

• 浏览器信息API——navigator对象

  • 获取当前浏览器版本信息：window.navigator.userAgent
  • 获取浏览器名称：window.navigator.appName
  • 获取浏览器当前运行系统：window.navigator.platform

• 浏览器滚动时卷去的宽高API

• 获取卷去的高度

  HTML文件存在DOCTYPE标签时获取方式：
  var 变量 = document.documentElement.scrollTop
  
  HTML文件不存在DOCTYPE标签时获取方式：
  var 变量 = document.body.scrollTop
  
  兼容语法：
  var 变量 =  document.documentElement.scrollTop || document.body.scrollTop

• 获取卷去的宽度

  HTML文件存在DOCTYPE标签时获取方式：
  var 变量 = document.documentElement.scrollLeft
  
  HTML文件不存在DOCTYPE标签时获取方式：
  var 变量 = document.body.scrollLeft
  
  兼容语法：
  var 变量 =  document.documentElement.scrollLeft || document.body.scrollLeft

  

• 设置浏览器滚动到指定位置API

  语法①：window.scrollTo(X轴坐标, Y轴坐标)
  特点：瞬间定位到目标位置
  
  语法②：
  window.scrollTo{
    // 定位到的目标坐标位置
    top: 0,
    left: 0,
    // 设置定位时的滚动方式
    // 平滑滚动：smooth
    // 瞬间定位：instant
    behavior: smooth
  }

• 操作BOM 的事件

• 页面加载事件
  特点：页面所有资源加载完后触发，可将JS代码前置，并正常使用

  window.onload = function(){ 执行代码 }

• 滚动条滚动事件
  特点：滚动条滚动时触发，可实现楼层显示、顶部导航栏适时固定显示、回到顶部、渐进页面加载显示、瀑布流等操作

  window.onscroll = function(){ 执行代码 }

• 实时监测可视窗口大小事件
  特点：可视窗口变化时触发，结合innerWidth与innerHight判断屏幕尺寸，实现监测移动端的横竖屏、响应式布局

  window.onresize=function(){ 执行代码 }