浏览器对象模型（DOM）是js开发web应用程序的核心。BOM提供了与网页无关的浏览器功能对象。

主要的对象包括：window、location、navigator、screen、history。

window

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中有两个重要的身份，一个是全局Global对象，另一个就是浏览器窗口的js接口。

Global全局作用域

通过var声明的全局变量和函数都会编程window对象的属性和方法。

var age = 20;
function say(){
    console.log(this.age);
}

console.log(age) //20
console.log(window.age) //20
say() // 20
window.say() // 20

窗口关系

window.self：始终指向window

window.top：始终指向最最上层的窗口，即浏览器窗口本身

window.parent：始终指向当前窗口的父窗口

窗口位置

window对象的窗口可以通过不同的属性和方法来确定

window.screenLeft:表示窗口相对于屏幕左侧的位置。

window.screentop:表示窗口相对于屏幕顶部的位置。

window.moveTo(100，100)：将窗口西东到新位置的绝对坐标x,y

window.moveBy(50，50)：相对于当前位置在两个方向上移动x,y像素。

窗口大小

outerWidth和outerHeight：返回浏览窗口自身的大小

innerWidth和innerHeight：返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

window.resizeTo():接收两个参数表示新高度和新宽度值。

window.resizeBy():接收两个参数表示宽度和高度各要缩放多少。

视口位置

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。

window.scrollX和window.scrollY：表示文档相对于视口滚动距离的属性。

scroll()，scrollTo():滚动到x,y;

scrollBy():滚动了x，y

导航和打开新窗口

window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。

接收4个参数：URL、目标窗口、特性字符串、表示新窗口的在浏览历史记录中是否替代当前加载页。

var my = window.open("www.baidu.com",target="_blank","width=100,height=100");

第一个参数：指定要打开窗口的URL

第二个参数：指定要打开窗口的位置，可以是窗口的名字，如果没有该窗口，会打开一个新窗口名称为定义的名称。还可以是特殊的窗口名：_self,_blank,_parent,_top

第三个参数：用于设置窗口大小和位置等属性；

关闭窗口：my.close()

定时器

setTimeout：设置定时器，一段事件之后再执行操作

clearTimeout：清除定时器

setInterval：设置循环定时器，每隔一段事件执行操作

clearInterval：清除循环定时器

let timer1 = setTimeout(()=>{},1000);
clearTimeout(timer1);

let timer2 = setInterval(()=>{},1000);
clearInterval(timer2);

系统对话系统

alert():警告对话框，弹窗显示字符串

alert("你好！");

confirm():确认对话框，弹窗显示内容，但是还有两个按钮，确认和取消。

if(confirm("确认删除嘛")){
            console.log("删除成功")
        }else{
            console.log("删除失败");
        }

promt()：提示框，提醒用户输入信息。

let res = prompt("请输入姓名","");
console.log(res);

location

location提供当前窗口中加载文档的信息，以及通常的导航功能，既是window的属性，也是document的属性。

location不仅保存着当前加载文档的信息，也保存着把URL解析为离散片段后能够通过属性访问的信息。

例子：http://www.127.0.0.1:5500/search/?s=js#content

属性	值	说明
location.hash	#content	URL哈希值（#后跟的字符）
location.host	www.127.0.0.1:5500	服务器名及端口号
location.hostname	www.127.0.0.1	服务器名
location.href	http://www.127.0.0.1:5500/search/?s=js#content	当前加载页面的完整URL
location.pathname	/search/	URL中的路径名
location.port	5500	请求的端口
location.protocol	http	页面使用的协议
location.search	?s=js	URL的查询字符串
location.origin	http://www.127.0.0.1	URL的源地址

除hash以外，只要修改location的一个属性，就会导致页面重新加载新URL。

监听hash变化

window.addEventListener('hashchange',function(){
	//监听hash变化，点击浏览器的前进后退会触发
})

navigator

navigator主要用于客户端标识浏览器的标准。

通常用于确定浏览器的类型。

也用用于调用浏览器内部接口，如调用系统的摄像头和音频等。

详细使用请参考：developer.mozilla.org/zh-CN/docs/…

screen

screen对象保存了纯粹的客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息。比如像素宽度和像素高度。

此属性在日常开发中使用不多。

详细使用请参考：developer.mozilla.org/zh-CN/docs/…

history

history对象表示当前窗口首次使用以来用户的导航历史记录。

历史状态管理

使用pushState()和replaceState()来进行状态管理。

状态管理API可以让开发者改变浏览器URL而不会加载页面。

let state = {id:'123'};
history.pushState(state,'title',"/login");

pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的URL。

单击后退按钮，会触发window上的popState事件，popState事件的事件对象上有一个state属性，就是通过pushState传入的state对象。

注意：使用H5状态管理时，要确保通过pushState()创建的每个“假”URL背后都对应着服务器上一个真实的物理URL。否则单机刷新按钮会导致404错误。所有单页面程序框架都必须通过服务器或客户端的某些配置解决这个问题。

js之浏览器对象模式DOM（window、location、history）