Bom

概述

Bom 浏览器对象模型,他是用于操作浏览器相关内容的

Bom是一个缺乏规范的东西,为了保证他的规范性产生了一系列共用对象来解决这个问题.但是这些共用对象存在对应的兼容问题,直到W3c介入,他的兼容得到了保障


Window的相关属性和方法

概述:window属于浏览器的global对象(顶层对象).所有的全局函数及全局变量都属于window

方法

控制台打印方法

console.log()

console.error()

console.info()

console.warn()

console.debug()

弹窗相关方法

alert 提示框

prompt 输入框

confirm 交互框

窗口打开关闭的方法

open 打开一个新的窗口

close 关闭当前窗口

改变窗口大小的方法

resizeTo

resizeBy

改变窗口位置的方法

moveTo

moveBy

改变滚动栏位置的方法

scrollTo

scrollBy

查找方法

find

窗口聚焦和失焦的方法

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对应的跨域地址

方法

reloaed 重新加载

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

replace 替换当前的(没有历史)

对应的href进行赋值也可以进行跳转

history 历史对象 (*)

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

属性

length属性(历史页面个数)

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

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

方法

forward 前进

back后退

go 去任意历史页面(当前页面为0,大于0前进 小于0后退)

pushState

改变当前的url地址(并不会进行跳转 不会刷新操作) state的值(可以是任意类型的数据) 名字(建议空值) url地址,会产生跨域,如果传入对应的url 他会改变对应的url地址 (并非跳转),会新增对应的历史页面,会给对应的state进行赋值

replaceState

不会新增历史对象,把当前历史页面进行替换也会改变对应的url地址 也不会进行跳转(刷新) 也会改变对应的state的值

pushState和replaceState的区别

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

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

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

Screen 屏幕对象

属性

width 屏幕的宽度

height 屏幕高度

availHeight 可占用的最大屏幕高度

availWidth 可占用的最大屏幕宽度

availLeft 可占用的空间离桌面的左边距离

availTop 可占用的空间离桌面的上边距离

Navigator 导航对象

概述:他主要是用于获取用户浏览器及系统相关的设置以及内容

属性

userAgent 表示当前用户的系统信息以及对应的浏览

学习BOM核心,就是为了学习后面的路由(路由的底层BOM)

路由(扩展)

路由的核心就是分发,将对应的内容分发对应的路由地址。

前端路由(渲染)

根据对应的路由地址来渲染不同页面

前端路由的分类

页面路由(会进行页面的跳转 页面会刷新)

hash路由(根据对应的hash值来渲染对应的页面 不会进行页面的刷新操作)

history路由 (根据对应的地址的变化 而渲染对应的页面 不会进行页面的刷新操作)

需要对应得pushState调用或者replaceState调用

在改变了对应得state值以后 调用对应得forward方法或者是back方法或者是go方法

SPA 单页应用程序(只有一个页面)里面常用的路由是hash以及history路由

扩展补充内容

在对应的单页应用程序中我们常用vue和react等框架来进行开发,这就导致了我们对应的vue和react中

对应的路由模式常用hash模式及history模式(默认设置的路由模式都是hash模式)

后端路由 (业务)

根据对应的路由地址来处理不同的业务(访问不同的接口)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • BOM 概述:BOM(全称bowser object model)浏览器对象模型,用于浏览器相关内容操作; BOM...
    湖南第一深情阅读 975评论 0 1
  • BOM的概述: Bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏览器上的...
    富贵花开888阅读 3,003评论 0 2
  • ECMAScript是JavaScript的核心,而BOM(浏览器对象模型,Browser Object Mode...
    海人为记阅读 1,410评论 0 0
  • BOM BOM的概述: bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏...
    喷火小王八阅读 1,352评论 0 1
  • 浏览器架构 JavaScript运行在浏览器,BOM就是连接JavaScript代码和浏览器的桥梁,而DOM就是用...
    一颗冰淇淋阅读 2,817评论 0 0