BOM

BOM

BOM是Browser Object Mode的缩写，简称浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能，也就意味着可以获取浏览器上的所有内容以及相关的操作

BOM中的window对象和方法

window 窗口对象

属于全局的global对象 //Window是构造函数

iterator 迭代器对象

window对象是BOM中的核心（顶层）对象，所有对象都是他延伸出来的

相关方法

打印 console.log('日志') //以日志方式打印 console.error('错误') //以错误方式打印 console.warn('警告') //以警告方式打印 console.info('消息') //消息打印 console.log('测试') //测试打印

弹窗 prompt() 输入窗

alert() 提示窗

confirm() 确认窗

打开和关闭窗口 open close

定时器和延时器 setInterval setTimeout

moveTo 移动到某个位置 （x轴，y轴）

moveBy 从当前位置移动多少（x轴，y轴）（正值 向右 负值 向左）

resizeBy 改变对应的窗口大小 （宽度，高度）在原来的基础上加上给定的宽度和高度

resizeTo 改变原来的值为现在给定的值 （宽度，高度）设置的宽高为最终的宽高

isNaN 及 pareseInt pareseFloat

eval 将字符串转为对象 （安全性极差）

focus 聚焦

blur 失去焦点

print 打印方法（打印机）

find 查找

scrollBy（x轴距离 ，y轴距离） 原本的位置加上括号里给的值

scrollTo （x轴距离 ，y轴距离）变成所给值的位置

相关属性

innerWidth 获取对应的宽度

innerHeight 获取对应的高度

parent 找到所有的窗口

特殊对象 image 图片 event 事件源对象

//打印
window.console.log('hello') //window可以省略
console.log('日志')  //以日志方式打印
console.error('错误')  //以错误方式打印
console.warn('警告')  //以警告方式打印
console.info('消息') //消息打印
console.log('测试')  //测试打印
//弹窗
window.alert('请确认')
var  isTrue =confirm('您确认要删除吗') //交互框 确认输出true 取消输出false
console.log(isTrue)
var str = prompt('请输入您的姓名')//输入框 会返回对应的输入内容（string类型）
console.log(str)
//打开 open 关闭 close
//第一个参数是url地址 第二个参数是title标题 target（_blank默认新窗口打开  _self 当前窗口打开） 第三个参数为设置的参数（窗口宽高等）
window.open('   ','_blank','width=100px,height=100px')
window.close()//关闭当前窗口
// height=100 窗⼝⾼度；
// width=400 窗⼝宽度；
// top=0 窗⼝距离屏幕上⽅的象素值；
// left=0 窗⼝距离屏幕左侧的象素值；
// toolbar=no 是否显⽰⼯具栏，yes为显⽰；
// menubar，scrollbars 表⽰菜单栏和滚动栏。
// resizable=no 是否允许改变窗⼝⼤⼩，yes为允许；
// location=no 是否显⽰地址栏，yes为允许；
// status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许；

 

document 文档对象

history 历史对象！！！

属性

length 历史页面个数如果是本页进行跳转 会存入历史页面（每个页面的历史对象是独立的）

scrollRestoration 滚动栏恢复属性

state 状态值存储

方法

forward 前进

back 后退

go() 去任意页面 参数为0则是自身，大于0前进，小于0后退

pushState 增加state(数据， ' ' ， 地址(会产生跨域问题)) 会改地址 但是不会刷新

推一个历史页面到历史区中 state设置进去

replaceState 替换state(数据，' ',地址(会产生跨域问题)) 改地址 但是不会刷新

在历史区修改当前页面 state会设置进去

location 地址栏对象！！！

属性

location.hash 访问#后的值

location.search ？后面的值 一般是get请求传输数据的时候

location.host 主机 域名 IP地址+端口号

location.hostname 主机名 IP地址（127.0.0.1表示本机地址和localhost是一样的）

location.href 链接的地址

location.port 端口号 1-65525 （1-100端口号被电脑占用 http 默认80 https 默认443）

location.origin 跨域

location.pathname 路径名 获取的除了协议和IP地址加端口号后面的东西

location.protocol 协议 用于通信 （基于TCP/IP）http (明文传输) https (安全 加密)

方法

location.href = ' ' 通过更改路径实现的

location.assign(' ') 跳转页面 保存历史记录

location.replace(' ') 替换

reload() 重新加载页面 参数为布尔类型

true（从服务器加载 更慢） false（从缓存中加载）

history和location为什么重要？

history和location是所有的js框架(react vue angular)的路由的底层实现

frames 第三方框架对象

获取所有的iframe标签 实际返回的是一个window

screen 屏幕对象（多端适配）

availWidth 可占用的最大宽度

availHeight 返回浏览器窗口在屏幕上可占用的最大高度

availLeft 可利用空间距离屏幕最左边的距离

availTop 可利用空间距离屏幕最上边的距离

navigator 导航对象

userAgent 用户的相关浏览器设置内容