javascript之BOM
一、BOM(The Browser ObjectModel):-浏览器对象模型,
(1)BOM提供了独立于内容而与浏览器窗口进行交互的对象。 (2)BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。 (3)BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
(4)BOM没有统一的标准,每种浏览器都有自己的BOM实现。
二、 基本的BOM体系结构图:
三、BOM主要对象详解：
1. Window对象：
window对象是BOM的顶层(核心)对象，因此调用它的子对象时可以不显示的指明window对象.
eg: window.alert("hello"); 等同于 alert("hello");
JavaScript中的任何一个全局函数或变量都是window的属性.
1.1 window对象的主要方法：
(1) moveBy(dx, dy); -- 窗口移动(dx,dy)个像素。
(2) moveTo(x, y); -- 窗口移动到(x,y)像素。
(3) resizeBy(dw, dh); -- 调整(dw,dy)个像素,当x、y的值大于0时为扩大，小于0时为缩小。
(4) resizeTo(w, h); -- 调整到宽为w个像素，高为h个像素。
(5) scrollTo(x, y); -- 将窗口中的内容滚动到指定位置。
(6) scrollBy(dx, dy); -- 将窗口中的内容滚动(dx,dy)个像素。
(7) focus(); -- 使得窗口得到焦点并执行由 onfocus 事件指定的代码。
(8) blur(); --把焦点从顶层窗口移开。
(9) alert(text); -- 弹出一个信息框。
(10) comfirm(text); -- 弹出一个确认框.
(11) prompt(text,Defaulttext); -- 弹出一个提示框
第一个参数是显示给用户看的文本
第二个参数就是文本框中的默认文本
返回值是用户写入文本框中的字符串。
(12) open(URL,Name,parameterList,replace); -- 创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址
第一个参数：要打开的网页url，可以是相对路径;
第二个参数：打开窗口的名称(还可以包括_self,_parent, _top及_blank几个特殊值) 第三个参数：用于描述打开窗口的特性，比如大小、是否有工具栏等。
注意：特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格。
第四个参数：布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定。
eg: window.open(“http://www.baidu.com/”,“_blank”,“height=150,width=300,top=10,left=10,resizable=yes”);
(13) close();--方法关闭一个浏览器窗口
(14) setTimeout(fn,time); -- 用于指定一段时间后执行某函数
第一个参数：可以是字符串组成的jascript代码，也可以是一个函数名称。
第二个参数：表示时间，毫秒为单位。
(15) clearTimeout(timer); -- 清除由setTimeout创建的定时器
eg: var iTimeoutId =setTimeout(“alert(‘Hello world!’)”, 1000);
clearTimeout(iTimeoutId);
(16) setInterval(fn,time); -- 用于周期性执行某函数;
(17) clearInterval(timer); -- 清除由setInterval指定的定时器;
(18) createPopup(); --创建弹出窗口。
(19) execScript(); -- 以给定语言执行指定的脚本。
(20) navigate(sURL); -- 跳转到指定 URL,只有IE有效.
(21) print(); --打印当前窗口的内容。
(22) showModalDialog(sURL [, vArguments] [,sFeatures]); --
sURL：必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments：可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures：可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。 2.dialogWidth: 对话框宽度。 3.dialogLeft: 离屏幕左的距离。 4.dialogTop: 离屏幕上的距离。 5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。 6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。 7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。 8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
1.2 window对象的主要属性：
(1) screenX,screenY
测量窗口位置（Firefox 和 Safari支持）。
(2) screenLeft,screenRight
测量窗口位置（IE、Safari 和 Opera支持）。
(3) status,defaultStatus
用来来控制状态栏信息（设置或获取）,其中,defaultStatus是指第一次载入页面时，使用的默认的状态栏信息.
(4) opener
获得打开本窗口的主窗口
eg:window.opener.msg
(5) closed
判断引用窗口是否已关闭。
(6) dialogArguments
设置或获取传递给模式对话框窗口的变量或变量数组。
(7) dialogHeight/dialogWidth/dialogLeft/dialogTop
设置或获取模式对话框的高度/宽度/左坐标/顶坐标。
(8) frameElement
获取在父文档中生成 window 的 frame 或 iframe 对象。
(9) length
设置或获取窗口中的框架数目。
(10) name
设置或获取窗口名称。
(11) offscreenBuffering
设置或获取对象在对用户可见之前是否要先在屏幕外绘制。
(12) parent
获取对象层次中的父窗口。
(13) returnValue
设置或获取从模式对话框返回的值。
(14) self
获取对当前窗口或框架的引用。
(15) top
获取最顶层的祖先窗口。
(16) innerwidth/innerheight
获取窗口的文档显示区的宽度/高度。
(17) outerwidth/outerheight
获取窗口的外部宽度/高度。
(18) pageXOffset/pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 X 位置。
2. document对象：
document对象是window对象的属性，window对象的任何属性和方法都可直接访问。它是唯一一个既属性BOM又属性DOM。
2.1 document对象的主要方法：
(1) addEventListener();--添加事件监听器
(2) appendChild();--添加节点
(3) createElement(); -- 创建节点
(4) getElementById(); -- 获得指定id的dom节点
(5) getElementsByName(); -- 获得指定名称的节点集合
(6) getElementsByTagName(); --获得指定标签的节点集合
(7) removeChild(); -- 删除子节点
(8) replaceChild(); -- 替换子节点
(9) insertBefore(); -- 在指定节点位置插入节点
(10) write()及writeln() --用于在文档中输出内容
eg: <script>document.write(newDate().getFullYear())</script>
(11) open(); --用于打开文档，准备输出内容
(12) close(); -- 关闭文档输出
2.2 document对象的主要属性：
普通属性：
(1) lastModifier -- 网页最后修改时间
(2)referrer -- 打开该文档的上一个页面
(3) title -- 文档的标题
(4) URL -- 文档的URL
(5) alinkColor -- 鼠标移到连接标签的颜色，body中alink属性的值
(6) bgColor -- 背景颜色，body标签中bgcolor属性的值
(7) linkColor -- 连接标签颜色，body中link属性的值
(8) fgColor -- 文本颜色，body中text属性的值
(9) vlinkColor -- 访问连接的颜色，body中vlink的值
集合属性：
(1) anchors -- 文档中的所有书签<a name="a1"></a>
(2) applets -- 获得文档中的所有applets对象
(3) embeds -- 获得文档中的所有embeds对象
(4) forms -- 获得文档中的所有表单对象
(5) images -- 获得文档中的所有图片对象
(6) links -- 获得文档中的所有连接对象<a href="test.html>aaa</a>
访问集合元素：document.links[0]或者document.links["a1"].
3. location对象：
location对象表示载入窗口的URL，还可以解析URL.
3.1 location对象的主要方法：
(1) assign(); -- 用于导向指定的连接
(2) replace(); -- 用于发射指定的连接，不会把打开的文档信息记录到历史记录中.
(3) reload(cache); -- 用于重新加载文档的内容, 参数cache表示是否允许从cache中加载
cache -- true : 从服务器加载.
-- false:从缓存中载入.
3.2 location对象的主要属性：
(1) href -- 获得url
(2) port /protocol -- 端口及协议
(3) search -- 地址中?后的字符串
(4) host /hostname -- 主机或主机名称
(5) hash -- 地址中#及后面的内容
4. navigator对象：
4.1 navigator对象的主要属性：
(1) appCodeName -- 产品名称
(2) appName -- 应用名称
(3) appVersion -- 版本号
(4) cookieEnabled -- 是否允许使用cookie
(5) language -- 语言
(6) oscpu -- 操作系统名称
(7) platform -- 操作系统平台
(8) product -- 产品代号或名称
(9) productSub -- 产品发布日期
(10) userAgent -- 客户端详细信息
(11) cpuclass -- 浏览器系统的 CPU 等级
5. screen对象：
5.1 screen对象的主要属性：
(1) availHeight -- 窗口可以使用的屏幕的高度（以像素计）
(2) availWidth -- 窗口可以使用的屏幕的宽度（以像素计）。 (3) colorDepth -- 用户表示颜色的位数，大多系统采用32位。 (4) height -- 屏幕的高度，以像素计。 (5) width -- 屏幕的高度，以像素计。
6. history对象：
6.1 history对象主要的方法：
(1) history.go(index); -- 在浏览器历史记录中跳转(正数为前跳，负数为后跳)
(2) history.back(); -- 后跳
(3) history.forward(); -- 前跳
6.2 history对象的主要属性：
(1)history.length; -- 获得历史记录的长度