BOM基础

发表于 更新于 分类于

BOM是什么

  1. 一些与浏览器改变尺寸，滚动条滚动的特效，都要借助BOM技术
  2. BOM(Browser Object Model, 浏览器对象模型) 是JS与浏览器窗口交互的接口

BOM常用对象

  1. Window 对象
    • window 对象是当前JS脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象
    • 在有标签页功能的浏览器中，每个标签都拥有自己的window 对象；也就是说，同一个窗口的标签页之间不会共享一个window对象
    • 全局变量是window变量的属性
      • var a = 1;window.a == a // true
    • 内置函数普遍是window的方法
      • 如setInterval、alert
      • window.alert ==alert // true
      • window.hasOwnProperty('alert') // true
  2. Navigator 对象
    • window.navgator 属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性和标识
      • appName 浏览器官方名称
      • appVersion 浏览器版本
      • userAgent 浏览器用户代理（含有内核信息和封装壳信息）
      • platform 用户操作系统
  3. History 对象
    • window.history 对象提供了操作浏览器会话历史的接口
    • 常用的操作就是模拟浏览器的回退按钮
    • history.back() history.go(-1)
  4. History 对象
    • window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
    • 重新加载当前页面
    • 可以调用location的reload方法以重新加载当前页面，参数true标识强制从服务器加载
    • GET请求查询参数
      • window.location.search 属性即为当前浏览器的GET请求查询参数
  5. 窗口尺寸相关属性
    • innerHeight
      • 浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
    • innerWidth
      • 浏览器窗口的内容区域宽度，包含垂直滚动条（如果有的话）
    • outerHeight
      • 浏览器窗口的外部高度
    • outerWidth
      • 浏览器窗口的外部宽度
    • 获得不包含滚动条的窗口宽度，要用 document.documentElement.clientWidth
    • resize 事件
      • 在窗口大小改变以后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(‘resize’) 来绑定事件处理函数
    • 已卷动高度
      • window.scrollY 属性表示在垂直方向已滚动的像素值
    • 已动高度
      • document.documentElement.scrollTop 属性也表示窗口卷动高度
      • document.documentElement.scrollTop 不是只读的，window.scrollY 属性是只读的
    • scroll事件
      • 在窗口被卷动之后，就会触发scroll事件，可以使用 window.onscroll 或者 window.addEventListener(‘scroll’) 来绑定事件处理函数
    • DOM元素都有offsetTop属性，表示此元素定位到祖先元素的垂直距离
      • 定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素