JavaScript（七）---- 浏览器操作对象BOM

BOM：全称 Browser Object Model，浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

BOM中常用对象有：

　 window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象

window对象

Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

1、常用方法

　 open( [sURL] [, sName] [, sFeatures] [, bReplace])   打开一个新的窗口。
   resizeTo(iWidth, iHeight) 将窗口的大小更改为指定的宽度和高度值。
   moveBy(iX, iY) 相对于原来的窗口移动指定的x、y值。
   moveTo(iX, iY) 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
   setInterval(vCode, iMilliSeconds [, sLanguage]) 每经过指定毫秒值后就会执行指定的代码。
   clearInterval(iIntervalID) 根据一个任务的ID取消的定时任务。
    setTimeout(vCode, iMilliSeconds [, sLanguage]) 经过指定毫秒值后执行指定的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。

代码示例：

 1 //open（）方法
 2 function openAd(){
 3     window.open("http://www.baidu.com","_self","400,height=400");
 4 }
 5 
 6 //resizeTo（）方法
 7 function small(){
 8     resizeTo(300,200); //相对于原本窗口改变指定的大小。    
 9 }
10 
11 //moveBy（）方法
12 function move(){
13     for(var i = 0 ; i<100 ; i++){
14         window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值。    
15         moveBy(0,50);
16         window.moveBy(-50,0);
17         window.moveBy(0,-50);
18     }
19 }
20 //moveTo方法
21 function move2(){
22     window.moveTo(500,200);    
23 }
24 
25 //setInterval()和clearInterval（）方法
26 var timeId = window.setInterval("showAd()",2000);
27 window.clearInterval(timeId);
28 //setTimeout()方法
29 window.setTimeout("move2()",2);

View Code

2、常用事件

基本上所有的HTML元素中都可以指定事件属性。每个元素支持什么样事件应查询文档。所有的事件属性都是以on开头，后面的是事件的触发方式。

如：onclick，表示单击；onkeydown，表示键按下

注册事件的方式：

方式一：直接在html元素上注册
        <body onload="ready()">
                function ready(){
                    alert("body的元素被加载完毕了..");
         }
　　</body>
方式二：可以js代码向找到对应的对象再注册。推荐使用。
       var bodyNode = document.getElementById("body");
　　 bodyNode.onload = function(){
               alert("body的元素被加载完毕");
       }

常用事件：

　　鼠标点击相关：
       onclick 在用户用鼠标左键单击对象时触发。
       ondblclick 当用户双击对象时触发。
       onmousedown 当用户用任何鼠标按钮单击对象时触发。
       onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

   鼠标移动相关：
       onmouseout 当用户将鼠标指针移出对象边界时触发。
       onmousemove 当用户将鼠标划过对象时触发。

   焦点相关的：
       onblur 在对象失去输入焦点时触发。
       onfocus 当对象获得焦点时触发。

   其他：
       onchange 当对象或选中区的内容改变时触发。
       onload 在浏览器完成对象的装载后立即触发。
       onsubmit 当表单将要被提交时触发。

代码示例

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <script type="text/javascript">
 4     
 5     function clickTest(){
 6         alert("单击..");    
 7     }
 8     
 9     function dbClick(){
10         alert("双击..");     
11     }
12     
13 
14 
15     function showTime(){
16         var timeSpan = document.getElementById("timeSpan");
17         var date  = new Date().toLocaleString();
18         timeSpan.innerHTML = date.fontcolor("red");
19     }
20     
21     function hideTime(){
22         var timeSpan = document.getElementById("timeSpan");
23         timeSpan.innerHTML = "";
24     }
25 
26 
27     function showInfo(){
28         var timeSpan = document.getElementById("userName");
29         timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");    
30     }
31 
32     function hideInfo(){
33         var timeSpan = document.getElementById("userName");
34         timeSpan.innerHTML = "";    
35     }
36  
37     function change(){
38         alert("城市改变了..");    
39     }
40 
41 
42 </script>
43 
44 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
45 <title>无标题文档</title>
46 </head>
47 <body>
48     <input type="button" onclick="clickTest()"  value="单击" />
49     <input type="button" ondblclick="dbClick()" value="双击"/> 
50     <span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>
51     用户名<input type="text" onfocus="showInfo()"  onblur="hideInfo()"  /> <span id="userName"></span>
52 
53     <select onchange="change()" >
54         <option>广州</option>
55         <option>深圳</option>
56         <option>上海</option>
57     </select>
58 
59 
60 </body>
61 </html>

View Code

location对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

常用方法

href : 设置以及获取地址栏的对象
reload() 刷新当前的页面

 1 <script type="text/javascript">
 2     function showURL(){
 3         alert(location.href);    
 4     }
 5     
 6     
 7     function download(){
 8         location.href="http://www.baidu.com";
 9     }
10     
11     
12     function rafresh(){
13         location.reload();    
14     }
15     
16     
17     window.setInterval("rafresh()",1000);
18     
19 
20 </script>

View Code

screen对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

常用属性

　 availHeight   获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
   availWidth   获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
   height       获取屏幕的垂直分辨率。
   width       获取屏幕的水平分辨率。

代码示例

1 <script type="text/javascript">
2     document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
3     document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
4     document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
5     document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");
6 </script>

View Code