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);
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>
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>
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>