BOM

BOM

BOM概念

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。

BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.

BOM属性对象

window

窗口对象 ，window对象是BOM的顶层对象，其他对象都是window对象的子对象

属性

1. innerWidth —— 获取对应的高度
2. innerHeight —— 获取对应的高度
3. parent —— 父辈

方法

1. 打印

// window //对象
console.log(window); //window 对象 Window的构造函数
//常用的弹窗方法及打印方法
window.console.log('hello') //console.log() window可以省略的
console.log('日志') //控制台  log日志 以日志的形式打印
console.error('错误') //以错误的形式打印
console.warn('警告') //以错误的形式打印
console.debug('测试') //以错误的形式打印
console.info('信息提示') //以错误的形式打印

//print打印方法（打印机）
window.print()

2. 弹窗

window.alert('hello') //弹提示窗
var isTrue = confirm('你确认要删除吗') //交互框  true确认 false取消 返回
console.log(isTrue);
var str = prompt('请输入你的手机号') //输入框 他会有个输入框让你输入返回对应的你输入的内容 （string的内容）
console.log(str);

3. 打开和关闭

//打开 open 关闭 close
// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数（窗口的高度 宽度等等）
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
// 　height=100 窗⼝⾼度；
// 　　width=400 窗⼝宽度；
// 　　top=0 窗⼝距离屏幕上⽅的象素值；
// 　　left=0 窗⼝距离屏幕左侧的象素值；
// 　　toolbar=no 是否显⽰⼯具栏，yes为显⽰；
// 　　menubar，scrollbars 表⽰菜单栏和滚动栏。
// 　　resizable=no 是否允许改变窗⼝⼤⼩，yes为允许；
// 　　location=no 是否显⽰地址栏，yes为允许；
// 　　status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许；
window.close() //关闭当前的窗口 （关闭浏览器只能有一个页面）

4. 定时器和延时器

   setInterval

   setTimeout

5. 改变位置的方法

//moveBy 一个是x轴的距离 y轴的距离
window.moveBy(100,100) //X+100 Y+100
//moveTo 一个x轴 一个y轴
window.moveTo(200,200) //X=200 Y=200

6. 改变大小的方法

//改变对应的窗口大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo 
window.resizeTo(200,200) //width=200 height=200

7. 聚焦和失焦的方法

//focus 聚焦  
window.focus()
//blur 失去焦点
window.blur()

8. 查找方法

//find查找 ctrl+f
window.find()

9. 滚动栏位置改变

//滚动栏位置改变  初始位置 x:0,y:0
window.scrollBy(100,100) //原本的位置 x+100，y+100
window.scrollTo(500,500) //到达位置 x=500 y=500 //回到顶部

document

文档对象(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)

history （重要)

历史对象,包含窗口的浏览历史，可以实现后退

属性

1. length —— 历史页面个数
2. scrollRestoration —— 滚动恢复属性
3. state —— 状态值

方法

1. go() —— 去任意的历史页面，其中参数为0则显示当前页面，参数为负值时跳转到前面的页面（可跨页面跳转），参数为正值时跳转到后面的页面（可跨页面跳转）
2. back() —— 后退
3. forword() —— 前进
4. pushState() —— 添加state的值 修改地址 以及将当前修改的地址推入历史区 不会刷新
5. replaceState() —— 会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去

location (重要)

地址栏对象，包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

属性

1. console.log(location);
2. console.log(location.hash); —— #后面带的值
3. console.log(location.host); —— 主机 域名 ip地址+端口号
4. console.log(location.hostname); —— 主机名 ip地址 （127.0.0.1表示本机地址和location是一样的）
5. console.log(location.protocol); —— 协议 用于通信 （基于tcp/ip）

​ http（不安全）明文传输 —— 默认端口80

​ https（安全）加密过（对称加密和非对称加密） —— 默认端口443

6. console.log(location.port); —— 端口号 1-65525 （1-100的端口号被电脑占用）
7. console.log(location.href); —— 链接的地址 也可以设置
8. console.log(location.search); —— ？后面带的值 一般是get请求传输数据的时候
9. console.log(location.origin); —— 跨域
10. console.log(location.pathname); —— 路径名 获取的除了协议和ip地址加端口号后面的东西

方法

1. location.assign() —— 跳转页面

2. location.reload() —— 刷新

3. location.replace() —— 替换页面

frames

第三方框架对象，可以获取页面框架内容

screen

包含有关客户端显示屏幕的信息

1. availHeight —— 可占用的最大高度
2. availWidth —— 可占用的最大宽度
3. availLeft —— 浏览器离显示屏最左边的位置
4. availTop —— 浏览器离显示屏最上边的位置

navigator

导航对象, 包含所有有关访问者浏览器的信息

userAgent —— 用户相关浏览器的设置信息