js浏览器对象模型（BOM）

浏览器对象模型(Browser Object Model,BOM)：浏览器为js提供的对象集合。

1 windows对象

windows对象：表示浏览器的框架以及与其相关的内容，比如滚动条和导航栏图标等等。或者说windows对象就代表浏览器本身。windows对象是个全局对象，他不需要使用名称访问自己的属性和方法。

//下面的代码本质是相同的
alert("hello!");
 
window.alert("hello!");

windows对象的某些属性也是对象。这些属性（对象）有location、history、document、navigator、screen。其中document属性（对象）又包含forms、images、links等属性（对象）。

2 history对象

history对象跟踪用户访问的每个页面，这个页面列表也叫做 history stack。用户单机浏览器的 Back 和 Forward 按钮，其本质就是在历史栈里进行切换。

2.1 属性

属性	注释
length	返回浏览器历史栈中的 URL 数量

2.2 方法

方法	注释
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

history.go(-1);     //后退1个页面
history.back();
 
history.go(1);       //前进1个页面
history.forward();
 
history.go(-2);     //后退2个页面

3 location对象

3.1 属性

location包含与当前页面位置有关的信息，常用属性如下：

//设置或获取整个 URL 为字符串
console.log(location.href);
/* http://localhost:63342/frontend_projects/test/index.html?_ijt=ll3ai4h2v873l9ukcm2g8a73hr  */


//设置或获取对象指定的文件名或路径
console.log(location.pathname);
/* /frontend_projects/test/index.html*/


//设置或获取与 URL 关联的端口号码
console.log(location.port);
/* 63342 */


//设置或获取 URL 的协议部分
console.log(location.protocol);
/* http: */


//设置或获取 href 属性中在井号“#”后面的分段
console.log(location.hash);
/* */


//设置或获取 location 或 URL 的 hostname 和 port 号码
console.log(location.host);
/* localhost:63342 */


//设置或获取 href 属性中跟在问号后面的部分
console.log(location.search);
/* ?_ijt=1lrq8evbm5uovrl1ib8af65g5n */

3.2 方法

方法	注释
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

使用新页面替换当前页面

//方法一：
//新页面是加在历史栈顶的，可以使用back()来返回到原来的页面
location.href ="newPage.html";
 
//方法二：
//使用replace()的本质是用新页面替换掉历史栈中的旧页面,因此无法通过history.back()退回到原来的页面
location.replace("newPage.html");

4 navigator对象

navigator对象包含浏览器和运行浏览器相关的信息

4.1 属性

属性	注释
appName	返回浏览器的模型
appVersion	返回浏览器的平台和版本信息
appCodeName	返回浏览器的代码名
platform	返回运行浏览器的操作系统平台
systemLanguage	返回 OS 使用的默认语言
userLanguage	返回 OS 的自然语言设置
onLine	返回一个布尔值，指示指示浏览器是否处于脱机模式
cookieEnabled	返回一个布尔值，指示指示浏览器是否启用了cookie
userAgent	返回由客户机发送服务器的 user-agent 头部的值

var tmp1 = navigator.appName;
//Netscape
 
var tmp2 = navigator.appVersion;
//5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
 
var tmp3 = navigator.appCodeName;
//Mozilla
 
var tmp4 = navigator.platform;
//Win32
 
var tmp5 = navigator.systemLanguage;
//undefined
 
var tmp6 = navigator.userLanguage
//undefined
 
var tmp7 = navigator.onLine;
//true
 
var tmp8 = navigator.cookieEnabled;
//true
 
var tmp9 = navigator.userAgent;
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

4.2 方法

方法	注释
javaEnabled()	返回一个布尔值，指示浏览器是否支持并启用了 Java

4.3 新增的geolocation

H5中为navigator新增了geolocation属性，并且geolocation也是对象。它可以获取并利用设备的物理位置。

geolocation中最常用的就是getCurrentPosition()方法：

//编写回调函数
//Geolocation.prototype.getCurrentPosition = function(successCallback,errorCallback,options) {};
function geoSucess(position) {
    var coords = position.coords;
    var latitude = coords.latitude;
    var longitude = coords.longitude;
 
    var message = "you are at "+latitude+","+longitude;
    alert(message);
}
 
function geoError(errorObj) {
    alert(errorObj.message);  //把系统返回的错误对象作为回调函数的参数
 
}
 
navigator.geolocation.getCurrentPosition(geoSucess,geoError);

5 screen对象

Screen 对象包含有关客户端显示屏幕的信息

详细信息参考：http://www.w3school.com.cn/jsref/dom_obj_screen.asp

6 document对象

有关document的高级操作就是DOM，后面我会介绍，这里只简单介绍document对象的基础用法。

document 是BOM中最常用的一个对象之一。通过这个对象可以访问到页面上的HTML元素以及其属性和方法。

document 有很多关联的属性，这些属性是类似数组的结构，即集合。常用的集合有forms、images、links。

6.1 属性

cookie：设置或返回与当前文档有关的所有 cookie。该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

domain：返回当前文档的域名。该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。

lastModified：返回文档被最后修改的日期和时间。该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。

referrer：返回载入当前文档的文档的 URL。如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

title：返回当前文档的标题

URL：返回当前文档的 URL。一般情况下，该属性的值与包含文档的 Window 的 location.href 属性相同。不过，在 URL 重定向发生的时候，这个 URL 属性保存了文档的实际 URL，而 location.href 保存了请求的 URL。

6.2 方法

getElementById()：返回对拥有指定 id 的第一个对象的引用

getElementsByName()：返回带有指定名称的对象集合

getElementsByTagName()：返回带有指定标签名的对象集合

close()：关闭用 document.open() 方法打开的输出流，并显示选定的数据

open() ：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出

write()：向文档写 HTML 表达式 或 JavaScript 代码

writeln()：等同于 write() 方法，不同的是在每个表达式之后写一个换行符

//效果相同
document.writeln("hello!")
document.write("hello!
")

6.3 集合

6.3.1 images集合

页面上的所有图像都保存在images集合中,images[0]表示页面上的第一个图片位，依次类推。所以我们可以利用js来按需选择要显示的图像源。

<img name="myImage" src="bg.jpg"/>
 
<script>
    var myImage = [
        "bj1.gif",
        "bj2.gif",
        "bj3.gif",
        "bj4.gif"
    ];
 
    var imgIndex = prompt("Enter a number from 0 to 3","");
    document.images[0].src = myImage[imgIndex];
 
    document.images.length //获取页面的图片位数量
 
</script>

6.3.2 links集合

对于每一个有href属性的超链接元素<a/>，浏览器都会创建一个a对象。与images集合类似，页面上的所有a对象都包含在links集合中。

document.links.length //获取页面链接的数量

7 浏览器测试

常用的代码测试有两种：特性检测和浏览器嗅探

7.1 特性检测

特性检测是指检测浏览器是否支持某个特性的过程。

//检测浏览器是否支持navigator.geolocation
if(navigator.geolocation){
   //blablabla
}

也可以写成下面的格式:

if(typeof navigator.geolocation!="undefined"){
       //blablabla
}
 
//在支持geolocation的浏览器中，类型为"object，而在不支持geolocation的浏览器中，类型为"undefined"

7.2 浏览器嗅探

浏览器嗅探就是基于浏览器的userAgent字符串的，然而这个字段是可以被修改的，所以非常不可靠。可以通过修改user-Agent来实现浏览器和操作系统的伪装。

//navigator.appName    返回浏览器的模型
//对IE返回"Microsoft Internet Explorer"，对Firefox、Chrome、Safari则返回"Netscape"
 
//navigator.userAgent   返回浏览器与操作系统相关的信息
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36