浏览器对象模型什么是浏览器对象模型BOM：BrowserObjectModel（浏览器对象模型），浏览器模型提供内容无关，可以随浏览器窗口滑动对象结构是API提供的由浏览器。主要对象有：1.window对象——BOM的核心，是js访问浏览器的接口，也是ES指定的Global对象。2.location对象：提供在当前窗口加载Documentation的信息和一些导航功能。它既是窗口对象属性又是文档对象属性。3、Navigation对象：获取浏览器的系统信息4、Screen对象：用于表示浏览器窗口外显示的信息等5、History对象：保存用户上网的历史信息WindowObjectwindows对象是整个浏览器对象模型的核心，它既是一个接口又是一个全局对象window对象的属性和方法属性说明alert()系统警告对话框接收字符串参数并显示confirm()系统confirmation对话框可以提供确认和取消两种事件。prompt()提示对话框不仅可以向用户显示确认和取消事件，还可以提供一个文本字段。open()可以导航到特定的url并打开一个新的浏览器浏览器窗口window.open(要加载的url,窗口目标,一个特定的字符串,一个新页面是否替换浏览器历史中当前加载的页面的布尔值)onerror()事件处理程序，当未捕获的异常传播到它时，它在调用堆栈上时被调用，并将错误消息打印到浏览器的JavaScript控件。window.onerror（描述错误的消息，string--导致错误的JavaScript代码所在文档的url，文档中发生错误的行数）setTimeout()超时调用--执行指定时间后的代码window.setTimeout(function(){...},milliseconds)setInterval()间歇调用--每隔指定时间执行一次window.setInterval(function(){...},milliseconds)ApplicationScenario:1.确认窗口位置和大小获取窗口位置的属性和方法属性说明兼容性screenLeft窗口相对于屏幕左侧的位置，适用于IE、Safari、ChromescreenTop窗口相对于的位置thetopofthescreen适用于窗口相对于IE、Safari、Chrome屏幕左侧的位置PositionappliestoFirefoxscreenY窗口相对于屏幕顶部的位置适用于FirefoxmoveBy(x,y)接受水平和垂直移动的像素数完全兼容moveTo(x,y)接受新位置的x和y坐标该值完全兼容跨浏览器获取窗口的左侧和顶部位置varleftPos=(typeofwindow.screenLeft=='number')?window.screenLeft:window.screenXvartopPos=(typeofwindow.screenTop=='number')?窗户。screenTop:window.screenY窗口大小属性和方法属性说明innerWidthinnerHeightIE9+,Safari,Firefox,Opera:容器中页面视图区域的大小Chrome:返回视口大小Mobile:返回可见视口（即可见页面屏幕上的区域大小）移动IE浏览器：不支持此属性。移动IE浏览器将布局视口信息保存到document.body.clientWidth和document.body.clientHeight时，outerWidthouterHeightIE9+、Safari、Firefox：返回浏览器窗口本身SizeOpera：返回页面视图容器的大小Chrome：返回视口大小resizeTo(width,height)接收浏览器窗口的新宽高resizeBy(width,height)接收新窗口与原窗口的宽高差值2.导航打开窗口属性说明open(url,[target,string,boolean])url:要加载的URL,target:windowtargetstring:具体的字符串，逗号分隔的字符串表示新窗口显示的特性boolean:布尔值，表示新页面是否替换浏览器中当前加载的页面history3、定时器setTimeout()和setInterval()都是由于JavaScript的语言特性而产生的。由于JavaScript是单线程解释器，在一定时间内只能执行一段代码。为了控制要执行的代码，有一个JavaScript队列，任务将按照它们被添加到队列中的顺序执行。setTimeout()和setInterval()的第二个参数告诉JavaScript将当前任务添加到队列的时间。如果队列为空，则添加的代码会立即执行；如果队列不为空，则等待前面的代码执行完毕。两者调用后，都会返回一个数字ID，可以用来取消对方法的调用。下面是倒计时代码varnum=10varinterval=setInterval(function(){num--console.log(num)if(num==0){clearInterval(interval)console.log('Done')}},1000)varnum=10vartimeout=function(){num--console.log(num)if(num>0){setTimeout(timeout,1000)}else{console.log('Done')}}setTimeout(timeout,1000)以上两种方法都可以用来倒计时，但是当使用`setInterval()`方法，这个方法会一直执行到页面卸载完成，无需干预，所以一般来说`serInterval()`比较消耗性能。那么`setTimeout()`方法就可以通过调用自身来完成间歇调用的功能。所以，一般情况下，使用`setTimeout()`来完成超时和间歇调用。Location对象提供有关当前窗口中加载文档的信息和一些导航功能。既是window对象属性又是document对象属性window.location===document.location//truelocation也是将url解析成独立的片段，通过location属性可以访问不同的片段。location对象的主要属性：属性名示例说明hash"#host"返回url中的hash（#>=0后的字符）host"juejin.im:80"服务器名+端口（如果有的话）hostname"juejin.im"onlyservernamehref"https://juejin.im/book/5a7bfe..."当前加载页面的完整urlpathname"/book/5a7bfe595188257a7349b52a"返回url的目录和（或）文件名端口"8080"url的端口号，如果不存在则返回Emptyprotocol"https:(orhttp:)"页面搜索使用的协议"?name=aha&age=20"返回url的查询字符串，以及问号开头的location的应用场景：1.解析url查询字符串参数并设置返回一个对象，可以通过循环和正则化来实现。有很多方法。实现的大致思路是：通过location的search属性获取当前url传过来的参数，如果url中有查询字符串就截取问号，然后遍历里面的字符串使用等号作为断点，使用decodeURIComponent()方法解析其参数的具体值，放入对象容器，返回2、加载新文档，也可以说是刷新页面，有主要是三个方法：assign():location.assign("http://www.xxx.com")可以立即打开新的url并在浏览器历史记录中生成新的记录，在一个页面中生成5条浏览记录，然后使用assign()跳转到url，只剩下两条历史记录，一条是assign重定向的页面，一条是之前的页面（使用assign()跳转方法的页面），所有其他页面被清除replace():location.replace("http://www.bbb.com")只接受url作为参数，跳转到的url接口不会在浏览器中生成历史记录，即历史长度不会+1，但会替换当前页面reload():它的作用是reload加载当前显示的页面。当不传递任何参数时，如果页面自上次请求后没有变化，则页面会从浏览器重新加载。如果传递了true，Navigation对象将被强制从服务器重新加载导航接口表示用户代理的状态和身份，允许脚本查询它并为某些活动注册自己导航对象的属性方法navigation应用程序场景检测插件注册处理程序提供的屏幕对象窗口显示的大小和可用颜色的输入信息屏幕对象的属性和方法History对象history对象保存了用户上网的历史记录，从窗口打开的那一刻起，history对象由窗口的浏览历史以文件列表和文件状态的形式出现。history对象的length属性表示浏览历史列表中元素的个数，但是出于安全考虑，脚本无法访问保存的urlHistory对象属性描述go()1的属性和方法，去用户的任意跳转history，go(n)表示前进n页，go(-n)表示后退n页(n>0)2.go()可以传一个字符串参数，如果浏览器历史中有这个url，就跳转到包含该字符串的第一个位置，否则什么都不做历史.length===0)
