BOM速览-浏览器对象模型

浏览器对象模型BOM

1.浏览器对象模型

BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。Bom由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

2.组成

浏览器对象模型有包括以下几个组成部分

1. 窗口对象window
2. 浏览器对象navigator
3. 历史对象history
4. 位置对象location
5. 文档对象document

3.窗口对象window

是javascript中最大的对象。它描述的是一个浏览器窗口

performance

window下新加入了performance对象现在点开f12你应该就能找到他哪怕你用的是ie；这个对象主要是用来监控测试网页的性能数据，都是只读属性，有兴趣可以google.

4.window对象的属性

window对象的属性比下表列举要多，这里只是常用的一些位置属性，诸如closed\defaultStatus\top\name\length等其他属性感兴趣可以戳一下w3c或者mdn了解下。

属性	描述
innerHeight	返回窗口的文档显示区的高度
innerWidth	返回窗口的文档显示区的宽度
outerHeight	返回窗口的外部高度
outWidth	返回窗口的外部宽度
pageXoffset	返回文档在窗口左上角水平方向滚动的像素。
pageYoffset	返回文档在窗口左上角垂直方向滚动的像素。
screenLeft	返回窗口相对于屏幕的X坐标。
screenTop	返回窗口相对于屏幕的Y坐标。

说道位置就说变吧珍藏的图贴出来，也搞了好几年了，每次获取位置的时候还是习惯看着图找属性；

5.window对象的方法

同样的window对象的方法也仅列举部分，如计时器部分单独拎出去说了，常用的部分火种；

方法	描述
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容。
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
scrollTo()	把内容滚动到指定的坐标。

5.1 window对象的open（）方法

定义和用法
Open（）方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法

	Window.open(URL,name)

参数 描述
URL 一个可选的字符串，申明了要在新窗口中显示的文档的URL，如果省略了这个参数，或者他的值是空字符串，那么新窗口就不会显示任何文档。
name 该字符生命了新窗口的名称

5.2 window对象的print（）方法

定义和用法
print（）方法用于打印当前窗口的内容。
语法

	window.print();

结合open，print方法，我曾做过一个打印简历的个人主页；本想放个图，估计过期了直接500甩我脸上了；大致就是通过html2excel或者2pdf生成份电子版简历在新窗口打开，然后直接调用print方法去进行快速打印；

5.3 window对象的confirm（）方法

定义和用法
confirm（）方法用于显示带有一段消息以及确认按钮和取消按钮的对话框。
语法

	confirm(message);

说明
如果用户点击确定按钮，则confirm（）返回true，如果点击取消按钮，则返回false
Message：要在window上弹出的文本
实例

	var k=confirm('确认提交？');
	if（k）{
		console.log('确定了');
	}
	else{
		console.log('取消了');
	}

5.4window对象的prompt（）方法

定义和用法
Prompt（）方法用于显示可提示用户进行输入的对话框
语法

	prompt（text，defaultText）

说明
如果用户单击提示框的取消按钮，则返回null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
参数 描述
text 可选，要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText 可选，默认的输入文本
实例

	var open_btn=document.getElementById("prompt");
	open_btn.onclick=function(){
			var name=prompt("配送地址");
			console.log("你的地址是："+name);
	}

这里的几个方法要用最好也就管理后台之类图省事的地方，要是toC这么搞怕是要被打死；

5.5window对象的scrollTo（）方法

定义和用法
ScrollTo（）方法可以把内容滚动到指定的坐标。
语法

	scrollTo（xpos，ypos）

Xpos：必须，要在窗口文档显示区左上角在页面中的x坐标。
Ypos：必须，要在窗口文档显示区左上角在页面中的y坐标。
实例

	var open_btn=document.getElementById("scrollTo");
	open_btn.onclick=function(){
			scrollTo(0,1200);
	}

这个最常见与返回顶部，应该不用多说了吧；

6.浏览器对象Navigator

Navigator对象描述
Navigator对象包含的属性描述了正在使用浏览器。可以使用这些属性进行平台专用的配置。
Navigator对象的实例是唯一的，可以用Window对象的navigator属性来引用他
navigator对象最常用的地方就是做信息采集，例如在用户点开门户后先进行判断，看用户浏览器是否支持开发所有的api,运营团队通常都会取用用户来源使用OS等信息，做国际化也会获取语言进行跳转；

Navigator的属性

属性	描述
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appMinorVersion	返回浏览器的次级版本。
appVersion	返回浏览器的平台和版本信息
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中上是否启用cookie的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent头部的值

7.History对象

History对象包含用户（在浏览器窗口中）访问URL
History对象是window对象的一部分，可通过window.history属性对其进行访问

History对象属性
length：返回浏览器列表中的URL数量。

方法	描述
back（）	加载history列表中的前一个URL
forward（）	加载history列表中的下一个URL
go（）	加载history列表中方的某个具体页面

8.Location对象

Location对象包含有关当前URL的信息
通过Location对象可以访问当前文档的url的各个不同部分。
Location对象是Window对象的一个部分，可通过window.location属性来访问。
URL简介
可以由，协议、域名或ip、端口、虚拟路径、文件名、参数及锚点7个部分组成。

http://blog.youkuaiyun.com:80/I1326/6946.html/?id=2&key=1#p=3	完整链接
http:	协议
blog.youkuaiyun.com	域名
:80	端口号
/I1326/	虚拟路径
6946.html	文件名
?id=2&key=1	参数
#p=3	锚点

Location对象属性

属性	描述
hash	设置或返回从井号（#）开始的URL（锚）
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
pathname	设置或返回设置或返回当前URL的路径部分
prot	设置或返回设置或返回当前URL的端口号
protocol	设置或返回设置或返回当前URL的协议
search	设置或返回从问好（？）

8.1Href属性

定义和用法
Href属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整URL。因此，我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL的内容。
语法

	location.href=URL//设置;;会立即跳转到url的页面	
	var myUrl=location.href;//获取;;

实例

	location.href="www.baidu.com";//立即刷新当前页面到百度
	console.log(location.href);
	//打印当前页面完整地址

8.2Hash属性

定义和用法
Hash属性是一个可读可写的字符串，该字符串是URL的锚部分（从#号开始的部分）
语法

	location.hash=anchorname;//设置
	var this_hash=location.hash;//获取

实例

	location.hash="top";
	console.log(location.hash);
	//top

8.3host属性

定义和用法
host属性是一个可读可写的字符串，可设置或返回当前URL的主机名称和端口号。
语法

	location.host=hostname;//设置
	var k=location.host;//获取

实例

	console.log(location.host);
	//打印当前域名和端口

8.4hostname属性

定义和用法
hostname属性是一个可读可写的字符串，可设置或返回当前URL的主机名。
语法

	location.hostname=myhostname;//设置
	var my_hostname=location.hostname;//获取

实例

	console.log(location.hostname);
	//打印当前域名

8.5port属性

定义和用法
port属性是一个可读可写的字符串，可设置或返回当前URL的端口部分。
语法

	location.port=portnumber;//设置
	var thisport=location.port;//获取

实例

	console.log(location.port);
	//打印当前页面地址的端口

8.6pathname属性

定义和用法
pathname属性是一个可读可写的字符串，可设置或返回当前URL的路径部分。
语法

	location.parhname=path;//设置
	var myPath=location.pathname;//获取

实例

	console.log(location.pathname);
	//打印当前路径

8.7protocol属性

定义和用法
protocol属性是一个可读可写的字符串，可设置或返回当前URL的协议。
语法

	location.protocol=newproto//设置
	var myPro=location.protocol;//获取
实例
```js
	console.log(location.protocol);
	//打印当前页面的通讯协议

8.8search属性

定义和用法
search属性是一个可读可写的字符串，可设置或返回当前URL的查询部分（问号？之后的部分）。
语法

	location.search=searchcontent;//设置
	var mysearch=location.search;//获取

实例

	console.log(location.search);
	//打印当前页面的查询条件部分

9.Location对象方法

方法名	描述
assign（）	加载新的文档
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

9.1assign（）方法

定义和用法
assign（）方法可加载一个新的文档
语法

	location.assign(URL);//设置

实例

	location.assign("http://www.baidu.com");
	//跳转页面到www.baidu.com

9.2reload（）方法

定义和用法
reload（）方法可重新加载一个新的文档
语法

	location.reload();

实例

	location.reload();
	//重新加载当前页面

9.3replace（）方法

定义和用法
replace（）方法可用一个新的文档取代当前文档
语法

	location.replace(newURL);

实例

	location.replace("http://www.baidu.com");
	//替换当前页面