BOM

前端小杨_
302 阅读7分钟

BOM

概述

BOM全称(broswer object model浏览器对象模型)，主要是用于获取和操作浏览器相关内容的。它是缺乏规范，通过共有对象来实现对应的兼容。它主要的内容是浏览器操作也就是说如果脱离浏览器那么就没有BOMo

相关共有对象

window（全局(global)对象，所有的全局变量级方法都是它的内容） location（地址栏对象） history（历史对象） navigator(浏览器导航对象) screen(屏幕对象) frames子窗口(其实也是window) document文档对象（里面的操作属于DOM操作）

BOM(浏览器对象模型).png 学校BOM的重点是为了掌握对应的浏览器操作的同时了解对应的路由原理

window

概述

window属于浏览器的golbal对象，它可以理解为浏览器窗口（每打开一个窗口会单独存在一个window）

global对象的特性

  • 所有的全局变量都属于他的属性
  • 所有的全局定义的方法都是它的方法
  • golbal具备省略其他名字的特性

window相关属性

  • 所有的其他共有对象都是window对象的属性
  • caches缓存
  • cookiesStore cookies
  • crypto加密包
  • indexedDB数据库
  • innerHeight，innerWidth显示的宽高
  • localSorage，sessionStorage本地存储
  • .....
console.log(window.caches)//缓存存储器 cacheStorage
console.log(window.closed)//窗口是否关闭
console.log(window.coolieStore)//cookie存储器
console.log(window.crypto)//提供一个加密的对象
console.log(window.frameElement)//框架元素
console.log(window.customElements)//自定义元素
console.log(window.indexdDB)//浏览器数据库 存储其他地方存储不了的数据（超过10M）
console.log(window.innerHeight)//高度
console.log(window.innerWidth)//宽度
console.log(window.localStorage)//本地存储
console.log(window.sessionStorage)//本地存储
console.log(window.locationbar)//地址栏导航对象
console.log(window.menubar)//菜单栏对象

window相关方法

open 三个参数分别为打开的页面地址，打开的名字（类似于a标签target属性），窗口相关配置 相关配置的内容 left ,top height,width menubar,toolbar .....

image.png 示例

//open 打开新窗口
//url 打开的页面地址 target 打开的方式 相关窗口配置
window.open('http://www.baidu.com','_blank',"width=300,height=200,left=20,top=50")

close

关闭当前窗口

window.close()

相关控制台的方法

console它是一个属性会返回一个对象

console打印的相关方法

  • log日志打印方法
  • count数量打印方法
  • debug测试打印
  • warn警告打印
  • error错误打印
  • group分组打印 groupEnd
  • time时间 timeEed结束 （打印程序执行时间）
  • ....
console.log('日志打印')
console.count('数量打印')
console.debug('测试打印')
console.warn('警告打印')
console.error('错误打印')
console.group('分组打印')
console.dir('文件夹')
console.groupEnd()
//跟时间相关
console.time()
//添加事件戳标签
console.timeStamp('hello')
//结束计时打印
console.timeEnd()

弹窗相关方法

  • alert提示框
  • confirm交互框
  • prompt输入框
//弹窗相关方法
alert('你好')//普通提示 传入提示内容 没有返回值
var is=confirm('确定要删除吗')//交互框 传入相关提示 产生一个确定的按钮 （返回true）和取消按钮（返回fales）
console.log(is)
var value=prompt('请输入一个内容')//输入框 传入相关提示 产生一个输入框 返回输入框输入的内容
console.log(value)

打印机调用方法print

window.print()//将当前窗口的内容进行打印

moveTo和moveBY(窗口移动)

//x轴 y轴 移动到对应的坐标位置
window.moveTo(200,200)//200,200
//在原本的位置移动 X轴移动200 Y轴移动200
window.moveBy(200,200)//原本X和Y轴的位置+200

resizeTo和resizeBy(改变窗口大小)

//高度宽度 更改大小为对应的宽高
window.resizeTo(200,200)//宽度200 高度200
//在原本的宽度和高度上增长200
window.resizeBy(200,200)//原本宽高+200

scrollTo和scrollBy(滚动栏位置变化)

//传入一个坐标滚动栏移动到对应的坐标 x ，y
window.scrollTo(20,20)
//相对于原本的位置下x，y+20
window.scrollBy(20,20)

fetch 请求

//用于请求数据 传入一个请求地址的url 返回一个promise
var promise-window.fetch(newURL('https://music.163.com/weapi/middle/clientcfg/config/list?csrf_token='), {
    method: 'post'
}))
console.log(promise)

相关异步的定时器或延时器

  • setlnterval clearlnterval 定时器
  • setTimeout clearTimeout 延时器
  • setlmmediate clearlmmediate类似于延时器
//相关window定时器和延时器
var timer = setInterval(function(){
console.log(1)
},1000)
var id = setTimeout(function(){
clearInterval(timer)
clearTimeout(id)
},3000)
//异步的 类似延时器 该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其
他语句后，就立刻执行这个回调函数。
// var id = setImmediate(function(){
// console.log(123)
// })
// clearImmediate(id) 清除上述的内容

失焦和聚焦的方法

  • focus聚焦
  • blur失焦

location location是地址栏对象，主要是对于地址栏的内容进行设置及获取，以及使用地址栏进行跳转。

  • location相关属性
  • herf 链接地址
  • hash #号后面的值
  • search ?后面的值
  • host主机 hostname主机名
  • port端口号
  • protocol协议
  • origin 跨域地址
  • pathname文件路径
  • ancestorOrigins当前所属于上下文
//location中的属性大部分都是可设置
console.log(location.href) //链接地址
// location.href = 'http://www.baidu.com' 设置href属性可以进行页面的跳转
console.log(location.hash) //#后面的值 #一般放在最后面
location.hash = '哈哈哈哈哈哈'
console.log(location.search) //?后面值 ?一般在#前面
location.search = 'name=jack&age=18' //用于get传参 格式key=值&key=值
console.log(location.host) //主机
// location.host = '127.0.0.1:5000' //127.0.0. 表示本地 localhost表示本机
console.log(location.hostname) //主机名
location.hostname = '127.0.0.1'
console.log(location.port) //端口号 1-65535 1-100的值 大部分被当前电脑的进程占用了
// location.port = 65535 //超出减去对应的最大值
console.log(location.protocol) //协议 一般用的是超文本传输协议 http （不安全）
https（安全）
// location.protocol = 'https:'
console.log(location.origin) //跨域地址
console.log(location.pathname) //文件地址
// location.pathname = '/global对象特性.html'
console.log(location.ancestorOrigins) //只读属性是一个静态的DOMStringList (文档字符列
表)
//只读 只能读取 不能设置 也不能操作

相关方法

  • reload重新加载
  • assign跳转
  • replace 替换当前href进行跳转
<!-- 重新加载 reload方法支持传入参数 传入一个boolean类型的值 true表示重新加载 false表示从
缓存中加载 没有被正式采用 -->
<button onclick="location.reload()">reload</button>
<!-- replace直接替换当前页面的href 没有历史记录 -->
<button onclick="location.replace('http://www.sohu.com')">replace</button>
<!-- assign 打开新的页面进行跳转 存在历史记录-->
<button onclick="location.assign('http://www.taobao.com')">assign</button>

location中用于跳转页面的方式

  • assign方法
  • replace方法
  • location.href进行赋值
  • location直接赋值
location='http://www.baidu.com'

history history是操作对应的历史页面的一个对象，他可以进行历史页面的切换和相关方法的添加和历史页面的操作。 history相关的属性

  • length历史页面的个数
  • state状态值
  • scrollRestoration滚动恢复属性
//history相关属性
console.log(history.length)//表示历史页面的个数
//state属性 存储状态值
console.log(history.state)//默认这个值为null 这个state可以被更改和设置
//auto 将恢复用户已滚动到页面上的位置。（默认值）
//manual 未还原页面上的位置 用户必须手动滚动到该位置
console.log(history.scrollRestoration)//滚动属性恢复

history相关方法

  • back后退
  • forward前进
  • go去任意历史页面
  • pushState添加一个新的历史页面（更改当前的地址栏）（length+1）并且将对应的state值重新设置（不会进行跳转操作 不会刷新）
  • replaceState 替换当前的历史页面（更当前的地址栏）并且将对应的state值重新设置 （不会进行跳转操作 不会刷新）
<!-- 后退方法 -->
<button onclick="history.back()">back</button>
<!-- 前进方法 -->
<button onclick="history.forward()">forward</button>
<!-- 去任意历史页面方法 传入一个number类型整数的参数 相对于本身的值 本身这个页面的值为0 >0就
是前进 <0就是后退 -->
<button onclick="history.go(-1)">go</button>

function push(){
//添加一个新的历史页面 更改state的值 更改地址栏的url
history.pushState('hello','','./index.html')
console.log(history.length)
console.log(history.state)
}
function replace(){
//替换当前的历史页面 更改state的值 更改地址栏的url
history.replaceState('hello','','./index.html')
console.log(history.length)
console.log(history.state)
}

history的pushState和replaceState最大的好处在于页面不刷新 navigator 浏览器导航，浏览器相关内容及系统相关内容。 属性

  • userAgent 携带系统信息及浏览器信息
// 浏览器导航对象 获取系统信息及浏览器信息
console.log(navigator)
console.log(navigator.appCodeName)
console.log(navigator.appName)
console.log(navigator.appVersion)
//携带到后台
console.log(navigator.userAgent)

screen 屏幕对象主要是获取可占用的屏幕高度宽度。 属性

  • width、height
  • availHeight、availWidth
  • colorDepth 颜色深度
  • pixelDepth 色彩深度
  • ....
//屏幕宽高
console.log(screen.width)
console.log(screen.height)
//可占用的宽度和高度
console.log(screen.availHeight)
console.log(screen.availWidth)
//可占用的位置离左边和上边的距离
console.log(screen.availLeft)
console.log(screen.availTop)
// 返回屏幕的颜色深度（color depth）
console.log(screen.colorDepth)
// 返回屏幕的位深度/色彩深度（bit depth）
console.log(screen.pixelDepth)

document document主要是用于形容对应的html文档（html文档对象），它是整个dom操作中的超类。

avatar
文章
阅读
粉丝