首页 > 其他分享 >8.Bom

8.Bom

时间:2022-10-27 19:57:34浏览次数:43  
标签:console window Bom 跳转 pushState 对应 页面

bom是什么?

BOM (全称bowser object model) 浏览器对象模型,他是用于操作浏览器相关的内容。BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共用对象来解决这个问题。沿用至今,但是这些共有对象也存在对应的兼容问题,直到w3c的介入(ie 10以后)。他的兼容问题得到了保证。

window的相关属性及方法

window属于浏览器的global对象(顶层对象)。所有的全局函数及全局变量都是属于window的。(window可以被省略)

控制台打印方法

  • console.log()  日志打印

  • console.error()  错误打印

  • console.info()  信息打印

  • console.warn()  警告打印

  • console.debug()   调试打印

弹窗相关方法

  • alert 提示框

  • prompt 输入框

  • confirm 交互框

窗口打开关闭的方法

  • open 打开一个新的窗口
  • close 关闭当前窗口

改变窗口大小的方法

  • resizeTo  直接改变大小到对应的宽高

  • resizeBy 在原本的基础上增加对应的宽高

改变窗口位置的方法

  • moveTo  设置对应的位置

  • moveBy  在原本的位置上增加对应的距离

改变滚动栏位置的方法

  • scrollTo  将对应的滚动栏移到对应的位置
  • scrollBy  在原本的基础上进行位置的变化

窗口聚焦和失焦的方法

  • window.blur() 失焦

  • window.focus() 聚焦

属性

  • 获取窗口的父窗口 parent
  • innerHeight 获取高度 innerWidth 获取宽度

Document 文档对象

  • document对象是属于BOM的组成部分,他里面的一些的相关操作和对应的属性是属于DOM操作,具体的内容在对应的DOM中会提到。

  • document表示的是对应的HTML文档,他是用于操作对应HTML文档。

Location 地址栏对象 (*)

属性

  • hash 获取#后面的值 *

  • search 获取?后面的值 *

  • port 端口号

  • protocol 协议

  • host 主机

  • hostname 主机名

  • pathname 路径地址

  • href 对应的url地址 *

  • origin 对应的跨域地址

方法

  • reload 重新加载

  • assign 指定对应的地址进行跳转(有历史)

  • replace 替换当前地址进行跳转 (没有历史)

history 历史对象

history他里面包含了对应的历史页面,他是对于历史页面进行相关操作(页面替换,页面的跳转)

属性

  • length属性 (历史页面个数)

  • state属性 (状态 存储对应的值) *

  • scrollRestoration (滚动栏恢复行为 auto、 manual)

方法

  • forward 前进
  • back 后退
  • go 去任意历史页面(当前页面为0 大于0前进 小于0后退)
  • pushState 改变当前的url地址(并不会进行跳转 不会刷新操作)
  • replaceState 不会新增新的历史页面 把当前历史页面进行替换

 

pushState和replaceState的区别

  • pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址 (并非跳转 不会刷新)

  • pushState或者replaceState 会给对应的state进行赋值

  • pushState 会新增对应新的历史页面 replaceState 不会新增(他会替换当前历史页面)

 

标签:console,window,Bom,跳转,pushState,对应,页面
From: https://www.cnblogs.com/xfuuhmx/p/16833512.html

相关文章