Kpoint：BOM对象详解

BOM属性对象

是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

主要包括的Bom属性

BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

window浏览器窗口对象

name：指浏览器窗口的名字或框架的名字。这个名字是给a标签的target属性来用的。设置窗口的名字：window.name = “newWin” 获取窗口的名字：document.write(name);
top：代表最顶层窗口。如：window.top
parent：代表父级窗口，主要用于框架。
self：代表当前窗口，主要用于框架中。
innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性chrome支持。
innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性chrome支持。
alert()：弹出一个警告对话框。
prompt([text],[defaulttext])：弹出一个输入对话框。
confirm(text)：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取* * 消”返回false。 text：要显示的纯文本
close()：关闭窗口
print()：打印窗口
open([url],[name],[options]):打开一个新窗口
延时器：window.setTimeout(“code”,1000);// code一般是一个函数，但是放在双引号下，1000ms
返回值是延时器的id，给clearTimeout使用
定时器：window.setInterval(“code”,1000);// code一般是一个函数，但是放在”“下，1000ms
返回值是定时器的id，给clearInterval使用

location对象

location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面

history对象

history.length：历史记录的个数
history.go(0) 刷新网页
history.go(-1) 后退
history.go(1) 前进一步
history.go(3) 前进三步
history.forward()：相当于浏览器的“前进”按钮
history.back()：相当于浏览器的“后退”按钮

Navigator对象

userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
cookieEnabled – 返回浏览器是否支持(启用)cookie
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape
appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台

screen显示器屏幕

Width：屏幕的宽度，只读属性。
Height：屏幕的高度，只读属性。
availWidth：屏幕的有效宽度，不含任务栏。只读属性。
availHeight：屏幕的有效高度，不含任务栏。只读属性。

BOM应用

查询url参数

 function getQueryArgs(){
   let qs = location.search.length>0?location.search.substring(1).split('&'):[]
   let args = {}
   if(qs==[]){
     return {}
   }
   for(let item in qs){
     let data = qs[item].split('=')
     //decodeURIComponent() 解码name和value，一般url参数都会被编码
     args[decodeURIComponent(data[0])] = decodeURIComponent(data[1])
   }
   return args
 }
 console.log(getQueryArgs());