JavaScript之BOM基础

BOM(Browser Object Model)也叫浏览器对象，它提供了不少对象，用于访问浏览器的功能。可是BOM是没有标准的，每个浏览器厂家会根据本身的需求来扩展BOM对象。本文主要以一些简单的小例子，简述前端开发中BOM的相关基础知识，仅供学习分享使用，若有不足之处，还请指正。

概述

window对象是最顶层的对象，旗下还有6大属性，也都是对象。document对象下也有5大属性，一样都是对象。window的属性和方法，能够采用：window.属性，或 window.方法()进行调用，或者直接调用。BOM结构图，以下所示：

window对话框

window提供的默认对话共三种：系统对话框（alert），选择对话框（confirm），输入对话框（prompt），以下所示：

1 //系统对话框
2 alert('Hello world!!!'); //弹出一个对话框，只有一个肯定按钮，没有返回值。
3 //选择对话框，有两个按钮，肯定和取消。自己能够返回bool类型的结果，若是肯定，返回true，不然返回false
4 document.writeln( confirm('Are you sure ?'));//点肯定，输出true ；取消，输出：false
5 //输入框，须要用户输入值，输入的数据类型不限
6 document.writeln(prompt('Plese input a value:','0'));//点肯定：返回输入的值；点取消，返回null。

打开窗口

经过调用window.open方法，打开新的窗口。open方法共3个参数：一、新窗口的URL 二、窗口名称或目标 三、设置窗口属性 。以下所示：

1 window.open('http://www.baidu.com'); //打开新窗口
2 window.open('http://www.baidu.com','baidu');//新打开窗口的名称，凡是打开相同名称的窗口，则会原有窗口中从新加载。
3 window.open('http://www.baidu.com','_black');//在新窗口中打开并加载,也是只会打开一个
4 window.open('http://www.baidu.com','_parent');//在本窗口中加载

第三个参数，是窗口的一些特征，如宽，高，坐标，等。用逗号隔开。以下所示：

1 var box=window.open('http://wwww.baidu.com','baidu','width=400,height=400,top=100,left=100,location=yes');
2 document.writeln(box);//输出：[object Window] 即，open默认返回子窗口的window对象。
3 box.alert('show!!!');//因为跨域，则默认浏览器拒绝访问
4 var box=window.open('index.html','baidu','width=400,height=400,top=100,left=100,location=yes');
5 box.alert('show!!!');//不跨域，则能够访问
6 window.opener.document.writeln('访问父窗口');//经过window.opener访问父窗口

open方法默认返回新窗口的window对象，能够经过返回值来访问子窗口内容。

窗口的位置

用于获取和设置窗口的位置（左上角的起始坐标），主要经过screenLeft、screenTop和screenX、screenY来访问，以下所示：

1 document.writeln(window.screenLeft);//左边坐标，此属性firefox不支持
2 document.writeln(window.screenTop);//上边坐标，此属性firefox不支持
3 document.writeln(window.screenX);//左边坐标，此属性firefox支持,IE9以上也支持
4 document.writeln(window.screenY);//上边坐标，此属性firefox支持,IE9以上也支持

以上属性有的浏览器不支持，能够判断返回值是不是number类型来区分，以下所示：

1 var left=typeof window.screenLeft=='number'?window.screenLeft:window.screenX;
2 var top=typeof window.screenTop=='number'?window.screenTop:window.screenY;
3 document.writeln('left='+left+',top='+top);//输出：left=0,top=109 

窗口大小

窗口的大小，主要经过innerWidth、innderHeight和outerWidth、outerHeight来设置和获取。以下所示：

1 document.writeln(window.innerWidth);//,IE9以上也支持 内窗口显示区大小
2 document.writeln(window.innerHeight);//,IE9以上也支持 内窗口显示区大小
3 document.writeln(window.outerWidth);//,IE9以上也支持 ，外窗口总体大小，包含工具栏和边框
4 document.writeln(window.outerHeight);//,IE9以上也支持，外窗口总体大小，包含工具栏和边框
5 document.writeln(document.documentElement.clientWidth);//获取document的宽度 和innderWidth效果同样            
6 document.writeln(document.documentElement.clientHeight);//获取document的高度 和innderHeight效果同样        

如何跨浏览器获取窗口大小，能够经过document.compatMode判断浏览器的模式，以下所示：

 1 var width=window.innerWidth;
 2 var height=window.innerHeight;
 3 if(typeof width !='number'){
 4     if(document.compatMode=='CSS1Compat'){
 5         //若是就标准模式
 6         width=document.documentElement.clientWidth;
 7         height=document.documentElement.clientHeight;
 8     }else{
 9         width=document.body.clientWidth;
10         height=document.body.clientHeight
11     }
12 }
13 document.writeln('width='+width+',height='+height);//输出：width=1366,height=620 

窗口的移动和重置大小

经过moveTo、moveBy和resizeTo、resizeBy来设置窗口的大小和移动位置，以下所示：

1 window.moveTo(100,100);//移动到某个位置，目前都不支持，不起做用
2 window.moveBy(10,10);//每次刷新移动多少位置，目前都不支持，不起做用
3 window.resizeTo(300,300);//调整窗口大小，第一次打开起做用，后面再刷新不起做用
4 window.resizeBy(10,10);//从新设置窗口的大小，目前不起做用

window定时器

window的定时器一共有两种：一、超时操做（setTimeOut） 二、间歇操做（setTimeInterval）。

超时操做：第一个参数：能够执行的代码块字符串，第二个参数：超时时间，单位毫秒。以下所示：

1 //超时操做：第一个参数：能够执行的代码块字符串，第二个参数：超时时间，单位毫秒
2 setTimeout('alert("hello js!!!")',2000);
3 //可是不建议上述写法：不容易扩展，容易出错。能够采用以下方法：
4 function box(){
5     alert('hello js !!!');
6 }
7 setTimeout(box,2000);

可是上述方法就分开的，不是一个总体，推荐采用以下方式优化：

1 var box= setTimeout(function() {
2     alert('hello js !!!');
3 }, 2000);//推荐写法：扩展性好，封装性也好
4 //box表示超时执行的id
5 document.writeln(box);
6 clearTimeout(box);//能够取消超时调用执行计划

备注：超时操做经过clearTimeout来取消操做，参数为超时操做返回的id。

间歇调用，能够重复执行,定时执行，以下所示：间隔200毫秒，输出1到5。

 1 var num=0;
 2 var max=5;
 3 function bb(){
 4     num++;
 5     //document.writeln(num);//不能够用wirteln
 6     document.getElementById('A01').innerText=num;
 7     if(num==max){
 8         clearInterval(box);
 9     }
10 }
11 var box = setInterval(bb,200);

上述例子，也能够经过超时调用，模拟间歇调用，以下所示：

 1 var num=0;
 2 var max=5;
 3 var box=0;
 4 function bb(){
 5     num++;
 6     //document.writeln(num);//不能够用wirteln
 7     document.getElementById('A01').innerText=num;
 8     if(num==max){
 9         clearTimeout(box);
10     }else{
11         box=setTimeout(bb,200);
12     }
13 }
14 box = setTimeout(bb,200);

location对象

javascript中location地址对象描述的是某一个窗口对象所打开的地址。以下所示：

 1 document.writeln(window.location);//返回当前的路径
 2 document.writeln(document.location);//返回当前的路径
 3 window.location.hash="#66";//设置锚点，会跳转到新的页面，#能够不带，会默认带上
 4 document.writeln(window.location.hash);//返回路径的锚点，#66
 5 //端口
 6 document.writeln(window.location.port);//返回当前访问的路径的端口
 7 window.location.port=8888;//若是设置端口，则会跳转到对应的端口        
 8 document.writeln(window.location.search);//返回路径中？后面的信息，如：?__hbt=1581605601724 
 9 window.location.assign('http://www.baidu.com');//能够实现跳转到指定的url功能
10 window.location.href='http://www.baidu.com'; //一样能够跳转

从新加载，经过reload来实现，以下所示：

1 window.location.reload();//进行从新加载，多是从缓存中加载
2 window.location.reload(true);//强制从后台加载
3 window.location.replace('http://www.baidu.com');//在当前页面替换当前url到新的url并从新加载的方法

history对象

主要用于访问历史记录，如：前进、后退、跳转等，以下所示：

1 document.writeln(window.history.length);//返回历史记录的属性
2 window.history.back();//日后退
3 window.history.forward();//前进
4 window.history.go(-1);//跳转到指定的页数，负数日后退，正数往前进

navigator对象

navigator对象包含访问者客户端的相关信息，且navigator对象的实例的惟一的，以下所示：

1 document.writeln(window.navigator.appName);//完整浏览器名称，IE输出：Netscape ,不能精确的输出浏览器
2 document.writeln(window.navigator.userAgent);
3 //http头代理名称，IE输出：Netscape Mozilla/5.0 (Windows NT 6.1; Win64; x64; Trident/7.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko            
4 document.writeln(window.navigator.platform);//浏览器操做系统的平台，输出：Win64            
5 //插件列表
6 document.writeln(window.navigator.plugins.length);//插件个数

经过navigator对象输出浏览器的插件信息，以下所示：

1 for(var i=0;i<window.navigator.plugins.length;i++){
2     document.writeln('插件名称：'+window.navigator.plugins[i].name);
3     document.writeln('插件文件名：'+window.navigator.plugins[i].filename);
4     document.writeln('插件描述：'+window.navigator.plugins[i].description);
5     document.writeln('插件版本'+window.navigator.plugins[i].version);
6     document.writeln('<br />');
7 }

浏览器支持的MIME类型，以下所示：

1 document.writeln(window.navigator.mimeTypes.length);//4 
2 for(var i=0;i<window.navigator.mimeTypes.length;i++){
3     document.writeln(' mime名称：'+window.navigator.mimeTypes[i].type);
4     document.writeln(' mime描述：'+window.navigator.mimeTypes[i].description);
5     document.writeln(' mime后缀：'+window.navigator.mimeTypes[i].suffixes);
6     document.writeln('<br />');
7 }

备注

至于其余浏览器对象，用到的不是不少，暂不介绍。

生命赋予了咱们灵魂，却没有教会咱们如何走，关于情感的路，须要的是两我的风雨同舟。