操作BOM

BOM主要用于管理浏览器窗口，提供了独立的，可以与浏览器窗口进行互动的功能，这些功能与任何网页内容无关。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

1，使用window对象

1.1 访问浏览器窗口

浏览器对象简单说明如下：

window：客户端JavaScript中的顶层对象。每当<body>或<frameset>标签出现时，window对象就会被自动创建
navigator：包含客户端有关浏览器的信息
screen：包含客户端显示屏的信息
history：包含浏览器窗口访问过的URL信息
location：包含当前网页文档的URL信息
document：包含整个HTML文档，可被用来访问文档内容，及其所有页面元素

1.2 全局作用域

客户端JavaScript代码都在全局上下文环境中允许，window对象提供了全局作用域。由于window对象是全局对象，因此所有的全局变量都被视为该对象的属性。

1.3 使用系统测试方法

window对象定义了3个人机交互的接口方法，方便开发人员对JavaScript脚本进行测试。

alert()
confirm()
prompt()

1.4 打开和关闭窗口

使用window对象的open()方法，可以打开一个新窗口。用法如下。

window.open(URL,name,features,replace)

参数说明如下：

URL：可选字符串，声明在新窗口中显示文档的url
name：声明新窗口的名称
features：声明新窗口要显示的标识浏览器的特征
replace：规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

1.5 使用定时器

2，使用navigator对象

navigator对象包含了浏览器的基本信息，如名称，版本和系统等。通过window.navigator可以引用该对象，并利用它的属性来读取客户端基本信息，navigator对象属性说明如下：

appCodeName appMinorVersion appName appVersion browserLanguage cookieEnabled cpuClass onLine platform systemLanguage userAgent userLanguage

2.1 浏览器检测方法

1，特征检测法

if(document.getElementsByName){ //如果存在，使用该方法获取a元素
	var a = document.getElementsByName("a");
}
else if(document.getElementsByTagName){  //如果存在，使用该方法获取a元素
	var a= document.getElementsByTagName("a");
}

2，字符串检测法

var s = window.navigator.userAgent;
	alert(s);

2.2 检测浏览器类型和版本号

<script>
	var ua = navigator.userAgent.toLowerCase();
	var info = {
		ie:/msie/.test(ua) && !/opera/.test(ua),
		op:/opera/.test(ua),
		sa:/version.*safari/.test(ua),
		ch:/chrome/.test(ua),
		ff:/gecko/.test(ua) && !/webkit/.test(ua)
	};
	(info.ie) && alert("IE");
	(info.op) && alert("Opera");
	(info.sa) && alert("Safari");
	(info.ff) && alert("Firefox");
	(info.ch) && alert("Chrome");
</script>

2.3 检测用户操作系统

var isWin = (navigator.userAgent.indexOf("Win") != -1);
var isMac = (navigator.userAgent.indexOf("Mac") != -1);
var isUnix = (navigator.userAgent.indexOf("X11") != -1);
var isLinux = (navigator.userAgent.indexOf("Linux") != -1);

2.4 检测插件

略

3，使用location对象

location对象存储当前页面与位置(URL)相关的信息，表示当前显示文档的Web地址。使用window对象的location属性可以访问。

location对象定义了8个属性，如下

href(网站URL) protocol host hostname port pathname search hash

location对象还定义了两个方法，reload()和replace()

reload()：重新装载当前文档 replace()：重新装载一个新的文档而无须为它创建一个新的历史记录

4，使用history对象

back() forward() go()

5，使用screen对象

availHeight availWidth height width

6，使用document对象

6.1 动态访问文档对象

示例：使用name访问文档元素

<img name="img1" src="bg.gif" />
<form name="form" method="post" action="http://www.mysite.cn/navi/">
</form>
<script>
	alert(document.img1.src);   //返回图像地址
	alert(document.form.action);   //返回表单提交的路径
</script>

示例：使用文档对象集合快速索引

<img name="img" src="bg.gif" />
<form name="form" method="post" action="http://www.mysite.cn/navi/">
</form>
<script>
	alert(document.images[0].src);   //返回图像地址
	alert(document.forms[0].action);   //返回表单提交的路径
</script>

示例：如果对象定义有name属性，也可以使用文本下标来引用对象的元素对象。

<img name="img1" src="bg.gif" />
<form name="form" method="post" action="http://www.mysite.cn/navi/">
</form>
<script>
	alert(document.images["img1"].src);   //返回图像地址
	alert(document.forms["form"].action);   //返回表单提交的路径
</script>

6.2 动态生成文档内容

使用document对象的write()方法。

<script>
	document.write("<p>helloworld</p>")
</script>
<body>
</body>