简介

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); //1366console.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+borderconsole.log(oDiv.offsetWidth); //240console.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 不能在多页面内共享缓存数据只能在当前页面使用
操作方法同上

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

Web APIs五、BOM操作浏览器
零.文章目录 Web APIs五.BOM操作浏览器 1.Window对象 (1)BOM(浏览器对象模型) BOM(Browser Object Model ) 是浏览器对象模型 window对象是一个 ...
python对文件的操作都有什么_python中文件操作的相关内容总结（附示例）
本篇文章给大家带来的内容是关于python中文件操作的相关内容总结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1. 文件操作介绍说到操作文件我们肯定会想到流,文件的操 ...
浏览器相关内容总结?
1.cookie和sessionStorage和localStorage的区别共同点:都保存在浏览器端,且同源的.区别: 1.cookie数据始终在同源的http请求中携带(即使不需要),即cook ...
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript 给页面添加动态效果 JavaScript是一门编程语言,和Java没有关系,为了蹭热度. 语言特点: 属于脚本语言,不需要编译直接解析执行. 基于面向对象属于弱类型语言, 强类 ...
45-js操作DOM和bom操作
一.js中的DOM和BOM的基本操作 ECMAScript(核心语法): BOM(Browser Object Model 浏览器对象模型) 操作浏览器 DOM(Document Object Mod ...
smtplib + email 操作邮件及 string.Template模板替换 + openpyxl模块来实现个性化操作邮件相关
通过 smtplib模块 + emaill模块来操作邮件源代码如下: import smtplib #邮箱服务器 from email.mime.multipart import MIMEMult ...
前端学习之BOM（浏览器对象模型）
目录 1. BOM概述 1.1 定义 1.2 BOM构成 2. window 对象常见事件 2.1 窗口加载事件 2.2 调整窗口大小事件 3. 定时器 3.1 定时器 3.2 setTimeout( ...
JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
什么是BOM BOM概述浏览器对象模型 BOM的构成
什么是BOM BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window: BOM是由一些列相关对象构成,并且每个对象 ...

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

简介

BOM的三大对象

顶级对象 window对象

三大对象

location

history

navigator

BOM的三大系列属性

client系列

offset系列

scroll系列

BOM相关事件

浏览器缓存

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

最新文章

热门文章