一、BOM(The Browser ObjectModel):-浏览器对象模型,


             (1)BOM提供了独立于内容而与浏览器窗口进行交互的对象。
             (2)BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。
             (3)BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

             (4)BOM没有统一的标准,每种浏览器都有自己的BOM实现。

二、 基本的BOM体系结构图:


       

JavaScript操作BOM对象 javascript中bom_javascript


三、BOM主要对象详解:


     1. Window对象:

window对象是BOM的顶层(核心)对象,因此调用它的子对象时可以不显示的指明window对象. 

 

              eg:   window.alert("hello"); 等同于 alert("hello"); 

 
JavaScript中的任何一个全局函数或变量都是window的属性.
 
1.1 window对象的主要方法:
 
moveBy(dx, dy);  --  窗口 
 移动(dx,dy)个像素。
 
moveTo(x, y);  --  窗口 
 移动到(x,y)像素。
 
resizeBy(dw, dh);  --   
 调整(dw,dy)个像素,当x、y的值大于0时为扩大,小于0时为缩小。
 
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几个特殊值) 
 
                          第三个参数:用于描述打开窗口的特性,比如大小、是否有工具栏等。 
 
注意: 
 特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格。
 

                           第四个参数:布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定。 

 
window.open(“http://www.baidu.com/”,“_blank”, 
 “height=150,width=300,top=10,left=10,resizable=yes”); 

                   (13)  close();--方法关闭一个浏览器窗口 

 
fn,time);  --  
 用于指定一段时间后执行某函数
 
可以是字符串组成的jascript代码,也可以是一个函数名称。
 
表示时间,毫秒为单位。 

 
clearTimeout 
 (timer);  --  
 清除由setTimeout创建的定时器
 
 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 } [IE5+]:是否可被改变大小。默认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对象的主要方法:


addEventListener();--添加事件监听器


appendChild();--添加节点


createElement(); -- 创建节点


getElementById(); -- 获得指定id的dom节点


getElementsByName(); -- 获得指定名称的节点集合


getElementsByTagName(); --获得指定标签的节点集合


removeChild(); -- 删除子节点


replaceChild(); -- 替换子节点


insertBefore(); -- 在指定节点位置插入节点


write()及writeln() --用于在文档中输出内容


script>document.write(newDate().getFullYear())</script>


open();  --用于打开文档,准备输出内容


close();  -- 关闭文档输出


2.2 document对象的主要属性:


                     普通属性:


网页最后修改时间


referrer  -- 打开该文档的上一个页面


文档的标题


文档的URL


鼠标移到连接标签的颜色,body中alink属性的值


背景颜色,body标签中bgcolor属性的值


连接标签颜色,body中link属性的值


文本颜色,body中text属性的值


访问连接的颜色,body中vlink的值


                      集合属性:


文档中的所有书签<a name="a1"></a>


applets  --  获得文档中的所有applets对象


获得文档中的所有embeds对象


获得文档中的所有表单对象


获得文档中的所有图片对象


获得文档中的所有连接对象<a href="test.html>aaa</a>

                       访问集合元素:document.links[0]或者document.links["a1"].


             3. location对象:


                 location对象表示载入窗口的URL,还可以解析URL.


                  3.1 location对象的主要方法:


用于导向指定的连接


用于发射指定的连接,不会把打开的文档信息记录到历史记录中.


reload(cache);   -- 用于重新加载文档的内容, 参数cache表示是否允许从cache中加载


                             cache -- true : 从服务器加载.


                                        -- false:从缓存中载入.


                  3.2 location对象的主要属性:


href  --  获得url


port /protocol   --  端口及协议


search  --  地址中?后的字符串


host /hostname   --  主机或主机名称


hash   --  地址中#及后面的内容


              4. navigator对象:   


4.1 navigator对象的主要属性:


appCodeName  --  产品名称


appName  -- 应用名称


appVersion  --  版本号


cookieEnabled   --  是否允许使用cookie


language  --  语言


oscpu  --  操作系统名称


platform  --  操作系统平台


product  --  产品代号或名称


产品发布日期


客户端详细信息


                        (11)  cpuclass  -- 浏览器系统的 CPU 等级


              5. screen对象:


                  5.1 screen对象 的主要属性:


                       (1 availHeight  --  窗口可以使用的屏幕的高度(以像素计)


                       (2)  availWidth  --  窗口可以使用的屏幕的宽度(以像素计)。
                       (3)  colorDepth  --  用户表示颜色的位数,大多系统采用32位。
                       (4)  height  --  屏幕的高度,以像素计。
                       (5)  width  --  屏幕的高度,以像素计。


               6. history对象:


                    6.1 history对象主要的方法:


history.go (index);  --  在浏览器历史记录中跳转(正数为前跳,负数为后跳)


history.back();  --  后跳


history.forward();  --  前跳


   6.2 history对象的主要属性:


history.length;  --  获得历史记录的长度