一篇让你明白什么是浏览器BOM方法的笔记

BOM Browser Object Model 浏览器对象模型

虚拟机 ，任何语言编辑的程序都需要一个虚拟机来执行。如果脱离这个环境就无法运行。 浏览器就是一种虚拟机。用来解析html语言

同一款浏览器，在不同系统中，属性值是不同的

同一个系统，不同浏览器，属性都不同

BOM是有兼容问题

BOM属于树型结构。 BOM的根就是Window

DOM的根是Document   //DOM的根就是BOM的根下的一个属性

BOM的主要方法：
1 Window.doucment // Document 文档
 Window.Location // 本地信息
 Window.history // 历史 浏览器前进后退
 Window.screen // 屏幕
 Window.navigator // 浏览器信息

window的属性方法

1. open() //弹窗，设置弹出的网页地址，宽度高度等信息。
 ​
2. close() //关闭浏览器
 ​
3. innerWidth 、innerHeight //浏览器的宽度 包含滚动条宽度， 高度是文档的高度
 ​
4. outerWidth 、outerHeight //如果全屏宽度一样，如果不是全屏，则包含阴影宽度，
 //高度是整个浏览器的高度。
 ​
5. screenLeft、 screenTop
 screenX、 screenY //上下两组属性完全相同 浏览器窗口距离屏幕左上角的距离， 只读数据，无法进行修改

location的属性方法

 ​
1. location.reload(); //重载（刷新）当前页面
 ​
2. location.href="" //跳转到特定网址  可以设置获取网址信息 产生历史记录
 ​
3. location.assign("")//跳转页面 无法获取网址信息 产生历史记录
 ​
4. location.replace("")//跳转网页 无法产生历史记录
　　 >点击按钮跳转页面，
 　　>当服务器返回处理完的数据后台要求页面跳转
 ​
5. location.hash  //获取锚点名 网页地址#和后面的内容

6. location.search //网址?和后面的内容

  ## http://127.0.0.1:5500/test4.html ##

7. location.hostname // 网页域名 127.0.0.1
 ​
8. location.port //端口号 5500
 ​
9. location.pathname //域名端口号以外的内容 /test4.html
 ​
10. location.protoclo //获取网页协议  http：

history 方法

1. history.length //保存浏览器历史记录url数量 初始值为1
 ​
2. history.go()  //接收一个参数，正数代表向前跳转，负数代表向后跳转
 ​
3. history.back() //向后跳转 等同于history.go(-1);
4. history.forward() //向前跳转，等同于history.go(1);
 ​
5. history.pushState() //向浏览器历史添加了一个状态。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址 [ history.pushState(state, title, url); ]
 ​
6. history.replaceState() //方法的参数与pushState方法一模一样，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目

screen 属性

1. screen.availWidth   //电脑屏幕的宽度
2. screen.availHeight //电脑屏幕的高度
3. screen.width      //电脑屏幕的宽度（ 去掉底下任务栏 ）
4. screen.height    //电脑屏幕的高度（ 去掉底下任务栏 ）

navigator 属性

1. navigator.userAgent  //获取浏览器信息
 ​
2. navigator.appName  //返回浏览器的名称
 ​
3. navigator.appVersion  //返回浏览器的平台和版本信息
 ​
4. navigator.platform  //返回运行浏览器的操作系统平台