九、浏览器对象模型
BOM是一组从浏览器上下文中继承而来的对象。一下是BOM的层次结构
| Window | document | forms |
| navigator | cookie | |
| location | links/anchors | |
| frames | images | |
| screen | embeds/plug-ins | |
| history | all |
在集合中访问某个项可以使用数组索引（document.image[0]），也可以使用其name属性（document.image("name")），第三种就是使用元素的id属性（document.getElementById("name")）
（一）window对象
window对象封装了整个浏览器环境，包括window的“chrome”（组成浏览器窗口的通用组件）、实际的web页面，以及页面中的事件。
1.窗口的创建
alert("Hello?"); //只有一个参数且不返回任何值
var result = confirm("Do you like me?"); //一个问题，两个按钮。返回值由按钮决定
var response = prompt("Your name","...."); //两个参数（问题和文本框），返回值由按钮决定这类窗口称为弹出窗口。更有效的方式是打开一个新窗口显示额外信息。
window.open("URL","name","width=600,height=400,.....");window对象的open方法，可以打开一个新窗口，并且控制其内容、大小、位置等属性。具体如下：
| alwaysLowered | 将新窗口放在父窗口之下 | 默认值为no |
| alwaysRaised | 打开一个位于父窗口顶部的窗口 | 默认值为no |
| dependent | 打开一个依赖于父窗口的新窗口 | 默认值为no |
| directories | 在浏览器上显示个人书签或连接工具栏 | 默认值为yes |
| height | 内容区域的高度（像素） | 最小值为100 |
| width | 内容区域的宽度（像素） | 最小值为100 |
| outerHeight | 整个浏览器窗口的高度（像素） | 最小值为100 |
| outerWidth | 整个浏览器窗口的宽度度（像素） | 最小值为100 |
| top | 浏览器窗口最上方边缘的位置 | 必须在屏幕范围之内 |
| left | 浏览器窗口最左方边缘的位置 | 必须在屏幕范围之内 |
| menubar | 显示菜单栏 | 默认值为yes |
| toolbar | 显示工具栏 | 默认值为yes |
| location | 显示地址栏 | 默认值为yes |
| status | 在浏览器窗口底部显示状态栏 | 默认值为yes |
| relizable | 窗口大小可调 | 默认值为yes |
| scrollbars | 带有滚动条 | 默认值为yes |
| modal | 在返回主窗口之前，必须关闭所有打开窗口 | |
| dialog | 打开一个对话框窗口 | |
| minimizable | 添加最小化对话窗口 | |
| titlebar | 呈现标题栏 | 默认值为on |
| close | 呈现关闭按钮 | 默认值为on |
newWindow.focus(); //使它获得焦点
newWindow.blur(); //是下一个窗口获得焦点
newWindow.resizeBy(50,50); //相对于当前的修改量
opener.resizeTo(100,100); //opener操纵父窗口，重新设置窗口的绝对宽度和高度
self.moveTo(x,y); //self操纵当前运行脚本的窗口，将窗口左上角移到（x,y）坐标指定的位置上（二）二层对象
1.document对象
对表单及表单元素的访问权限：
document.getElementById();
document.getElementsByTagName();
document.writeln();对页面中的链接和锚的访问权限：
链接是指定href属性，锚是指定thename属性。document对象的links集合是由页面中所有超文本链接组成的，它的访问方法和数组一样。
window.onload = function () {
var links = "";
for (var i = 0; i < document.links.length; i++) {
links = links + document.links[i].href + "\n\n";
}
alert(links);
}通过document对象访问links集合，然后通过alert提取每个链接的href属性。
对页面中的图像的访问权限：
和链接一样，图片也有其对应的对象，也可以直接设置它们的属性。
var pics = new Image();
pics.src = "someimage.png";通过文档的images集合实现以幻灯片形式播放图片
var pics = new Array();
window.onload = function(){
for (var i = 0; i < 5; i++) {
pics[i] = new Image();
}
pics[0].src="1.png";
pics[1].src="2.png";
pics[2].src="3.png";
pics[3].src="4.png";
pics[4].src="5.png";
document.getElementById("next").onclick = nextPic;
document.getElementById("prev").onclick = prevPic;
}innerHTML属性，可以修改页面元素中的任何HTML，而无需构建整个页面内容，只需创建一个HTML格式的字符串，然后通过innerHTML就可以把字符串添加到Web页面中。但无论向Web页面添加什么，都无法融合到页面的文档树上。
2.navigator对象
navigator对象提供的是和浏览器用户代理相关的信息。
| appCodeName | 浏览器代码库的名称 |
| appName | 浏览器的名称 |
| appMinorVersion | 浏览器的副版本号 |
| appVersion | 浏览器的主版本号 |
| cookieEnabled | cookie是否启用 |
| mimeTypes | 数组，用来保存浏览器支持的MINE类型 |
| onLine | 用户是否联机 |
| platform | 浏览器运行的平台 |
| plugins | 数组，用来保存浏览器所安装的插件 |
| userAgent | 针对浏览器的完整的用户代理描述 |
| userLanguage | 浏览器支持的语言 |
3.location对象
location对象的属性都是与页面位置相关的。
parent.frame.location.replace(""); //替换其中一个框架的页面
parent.frame.location.reload(""); //使浏览器刷新文档| hash | URL中#后面的值 |
| host | URL的主机名和端口号 |
| hostname | 仅主机名 |
| href | 完整的URL |
| pathname | 域名之后的路径名 |
| port | URL中的端口号 |
| protocol | URL中使用的协议，如“http:” |
| search | 查询字符串，如果存在则是从页面中派生的；它包含URL中第一个问号之后的内容 |
| target | 表示载入URL的目标元素名称 |
var tmOut = setTimeout(func,5000,param1,.....);
clearTimeout(tmOut);一次性定时器方法只会触发一次，调用它时指定第一个参数是函数名称，第二个是以毫秒为单位的延迟时间。
var tmOut = setInterval(func,5000);
clearInterval(tmOut);4.frames对象
<frameset cols="50%,*">
<frame name="framea" src="framea.html">
<frame name="frameb" src="frameb.html">
</frameset>frame对象定义了属性：parent、length和name。父元素frameset通过框架的名字访问所有子框架；每个框架通过parent还访问frameset；同级的框架元素通过parent和对方的name属性来访问。
基于iframe的远程脚本
iframe是内嵌在页面中的，可以指定高度和宽度。如果将高度和宽度设置为0，则可以隐藏iframe。可以使用document的getElementById方法访问它，也可以使用target属性向其中载入内容。
基于远程脚本，客户端页面能够访问服务器端的远程服务，并将结果数据返回客户端，而且无需重载客户端。现在这一功能称为Ajax，绝大多数远程脚本都被改成通过一个特定对象来管理。
<iframe
name="myFrame"
id="myFrame"
style="width:0;height:0;border:0"
src="service.php">
</iframe>将Ajax应用程序的状态及时保存为一项历史记录，然后更新iframe，传入一个值表示状态。可以从iframe中获取其状态值，得到缓存状态，以便恢复相应的页面。
5.screen对象
screen对象包含的信息是与显示器屏幕有关的。属性会随版本的改变而改变。至少支持以下功能：
| availTop（top） | 窗口可以放置的最顶部位置（以像素表示） |
| availLeft（left） | 窗口可以放置的最左边位置（以像素表示） |
| availWidth（width） | 屏幕的宽度（单位为像素） |
| availHeight（height） | 屏幕的高度（单位为像素） |
| colorDepth | 屏幕的颜色深度 |
| pixelDepth | 像素的位元深度 |
6.history对象
history对象负责维护浏览器中页面载入操作的历史记录。属性（next、previous）或方法（back、forward）遍历历史记录。用current可以找到当前页面并获得history的长度。用go方法可以跳转到指定的页面。只有当使用Ajax页面效果时，history对象才成为需要关心的对象。
十、客户端存储技术
（一）cookie
cookie就是一个小型键/值对，它与过期日期和域名/路径相关联。这些信息作为Web请求的一部分传输，因此服务器端和浏览器都能够访问这些数据。
document.cookie = "cookieName = cookieValue; expires = date; path = path";通常在命名cookie时会以“$”或“_”为前缀，过期日期是一个重要部分，如果没有提供日期，那么会认为该cookie只用于当前会话，当浏览器会话结束时就会删除它。将cookie的有效日期设置为过去，以达到删除cookie的目的。cookie是个便捷的小工具，但只能存储20个cookie且总容量不能大于4KB。
（二）Flash共享对象、Google Gears和HTML5 DOM
为了存储更大的cookie或更复杂的对象，出现了一些新方法，但是没有跨所有浏览器实现。