BOM(操作浏览器相关内容)

最新推荐文章于 2024-07-03 17:11:30 发布

歪大梨

最新推荐文章于 2024-07-03 17:11:30 发布

阅读量435

点赞数

分类专栏：前端文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126898856

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

简介

BOM 全称：Browser Object Model 浏览器对象模型
BOM主要用来帮助我们操作浏览器的相关内容
- 操作内容包括
  - 地址栏内容
  - 前进后退（历史记录）
  - 刷新
  - 打开页面、关闭页面、跳转页面

BOM的三大对象

顶级对象 window对象
- 整个BOM 和 DOM体系都是由 window对象衍生出来的具体关系如下图所示
- window的方法
  - open
    - 用法1：window.open(指定的url地址)/open(指定的url地址)
      - 作用：可以打开一个指定url地址的页面
    - 用法2：window.open(指定的url地址，是否新页面打开，新页面的宽高，是否替换当前历史记录)
      - 作用：同上
      - 说明：
        
        是否新页面打开有两个可选值分别是 _self 和 _blank(默认的)
        
        新页面的宽高：这个值写作："width=xxxpx,height=xxxpx" 这个效果需要在新页面打开才生效
        
        是否替换当前历史记录是一个布尔值 true 表示替换 false(默认值)不替换一般我们建议大家不替换
  - close
    - 用法：window.close()/close()
    - 作用：关闭当前页面
  - 注意：window的方法和属性在script标签内部可以省略window 但是如果不在script标签内部则不能省略
三大对象
- location
  - location对象是window对象的一个属性这个属性主要用来处理 页面跳转、刷新和操作地址栏信息
  - 用法
    - 刷新用法：location.reload()
      - 作用：刷新页面
    - 跳转用法：location = "url地址"
      - 作用：在当前页面跳转到指定的url地址
      - 说明：location的跳转不能设置参数所以我们的跳转效果比较单一
  - 属性
    - location.href：整个地址栏中的全部url地址
    - location.protocol：获取地址栏中url地址的协议部分一般我们的网页使用的协议都是http或https(应用最广泛) http(hyper text transfer protocol) flie（本地文件协议）
    - location.hostname：获取地址栏中的url地址的服务器名
    - location.port：获取地址栏中 url地址的端口号
    - location.pathname：获取地址栏中文件的路径
    - location.hash：获取地址栏中的锚链接(哈希)
    - location.search：获取地址栏中表单提交数据
- history
  - history对象主要用来操作浏览器历史记录
  - history对象的方法
    - back
      - 用法：history.back()
      - 作用：回到上一条历史记录的页面
    - forward
      - 用法：history.forward()
      - 作用：前进到下一条历史记录的页面
    - go
      - 用法：history.go(n)
      - 作用：如果n>0 表示前进到下n条历史记录的页面如果n<0 表示回到上n条历史记录的页面
- navigator
  - navigator对象主要用来查询浏览器的相关信息
  - 重要属性
    - appCodeName：浏览器编号
    - appName：浏览器名称
    - appVersion：浏览器版本
    - cookieEnabled：是否启用cookie 布尔值 true表示启用 false表示禁用
    - platform：硬件平台即当前浏览器支持的最低硬件平台
    - plugins：当前浏览器安装的插件
    - userAgent：用户代理可以帮助我们检测当前浏览器的运行平台

BOM的三大系列属性

client系列

元素可视宽高
  元素.clientWidth:元素可视宽  content+padding
  元素.clientHeight:元素可视高  content+padding
  
元素的左上边框宽度
  元素.clientLeft:元素左边框宽度
  元素.clientTop:元素上边框宽度

屏幕的可视宽高
  document.documentElement.clientWidth;

  var oDiv = document.getElementsByTagName("div")[0];
  
  console.log(oDiv.clientWidth);//元素可视宽
  console.log(oDiv.clientHeight);//元素可视高
  
  // 屏幕的可视宽高：
  console.log(document.documentElement.clientWidth); //1366
  console.log(document.documentElement.clientHeight);//657

offset系列

元素占位宽高
  元素.offsetWidth: 元素占位宽  content+padding+border
  元素.offsetHeight: 元素占位高  content+padding+border

元素位置
  元素.offsetTop：元素到带定位父元素顶部距离，如果没有带定位父元素 则表示到body顶部距离
  元素.offsetLeft：元素到带定位父元素左侧距离，如果没有带定位父元素，则表示到body左侧距离

  var oDiv = document.getElementsByTagName("div")[0];
  var oP = document.getElementsByTagName("p")[0];
  
  //元素的占位宽  content+padding+border
  console.log(oDiv.offsetWidth); //240
  console.log(oDiv.offsetHeight); //240
  
  //标签.offsetTop: 获取元素的顶部到定位父元素的位置，如果没有定位父元素获取到body的位置
  console.log(oP.offsetTop); //0

sessionStorage：会话缓存

scroll系列
```
元素.scrollWidth/Height : 获取元素的实际内容宽
元素.scrollTop: 元素被卷去的高
元素.scrollLeft: 元素被卷去的宽
     
获取页面的滚动距离
   document.documentElement.scrollTop || document.body.scrollTop
```
BOM相关事件

onscroll：滚动条滚动事件当滚动条发生滚动的时候就执行这个事件

onresize：浏览器窗口大小改变事件当浏览器窗口大小发生变化的时候就执行这个事件

实际案例——懒加载
懒加载：懒加载就是页面只加载用户看到到内容不加载用户没看到的内容从而减少一次性加载的数据量提升加载速度优化用户体验
浏览器缓存
前端浏览器缓存

在我们前端（用户计算机）中是不会存储各个应用的数据的但是会存储一些和服务器之间数据交互的核心数据。

这些核心数据就是通过浏览器缓存来进行存储的

在html5中 js更新了两种新的操作缓存的api——localStorage 和 sessionStorage

localStorage：本地缓存
特点：缓存的容量较大 20M左右存储的数据会永久保存（除非手动删除）可以在多页面内共享缓存数据
操作方法
- 设置缓存数据：localStorage.setItem("数据属性名",要存储的数据)
  - 注意：在缓存中我们只能存储字符串
- 获取缓存数据：localStorage.getItem("数据属性名")
- 删除缓存数据：localStorage.removeItem("数据属性名")
- 清空缓存数据：localStorage.clear()
特点：缓存的容量较大 20M左右，存储的数据不会永久保存当我们关闭当前的浏览器会话窗口就会自动清空sessionStorage 不能在多页面内共享缓存数据只能在当前页面使用
操作方法同上