javascript BOM(浏览器对象模型)

1、什么是BOM

BOM(Browser Object Mode),即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

• BOM提供了独立于内容而与浏览器窗口进行交互的对象
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
• BOM最初是Netscape浏览器标准的一部分

2、BOM对象

• 2.1 Window 对象：
  表示浏览器打开的窗口，包括获取焦点、改变滚动条、设置定时器等。

• 2.2. Navigator 对象：
  包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等。

• 2.3. Screen 对象：
  包含屏幕信息。如：获取屏幕高度、宽度等。

• 2.4. History 对象：
  可对当前页的浏览历史进行操作，如：前进、后退等。

• 2.5. Location 对象：
  可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。

• 2.6 document对象：
  即文档对象。

• 2.7 frames对象：
  包含当前页面所有的框架信息.

Window 对象

window是BOM的核心，window对象也是BOM的顶级对象，所有浏览器都支持window对象，它代表的是浏览器的窗口。
JavaScript的所有全局对象、全局方法和全局变量全都自动被归为window对象的方法和属性，在调用这些方法和属性的时候可以省略window；如：window.alert() 可写成 alert() 。

全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window对象的一些基本方法：

window.open(); 打开新窗口
window.close();关闭当前窗口
window.moveTo(); 移动当前窗口
window.resizeTo(); 调整当前窗口的尺寸

Navigator 对象

navigator.appName;      //返回当前浏览器名
navigator.appCodeName;  //返回当前浏览器的代码名
navigator.appVersion;   //返回当前浏览器的版本号和平台
navigator.platform;     //返回当前计算机的操作系统

以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：

 navigator.userAgent;    //返回浏览器信息

Screen 对象

获取用户屏幕信息，

availHeight:窗口可以使用的屏幕的高度 
availWidth:窗口可以使用屏幕的宽度 

注意:不是显示器的高和宽，是当前分辨率的高和宽(分辨率的概念)

screen.height:屏幕的高度 
screen.width:屏幕的宽度

History 对象

该对象的属性：

history.length;         //返回历史记录的数量

该对象的方法：

 history.back();         //后退，加载前一个url。
 history.forward();      //前进，需要后退一下之后，才有前进的方向
  history.go(num);        //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新

Location 对象

location对象提供了很多属性和方法用来解析URL:

location.href = “http://www.baidu.com“; //链接到百度 
location.hash // 返回url中#后面的内容，包含# 
location.host // 主机名，包括端口 
location.port // URL中声明的请求端口，默认情况下，大多数URL没有端口信息，所以该属性通常为空白 
location.hostname // 主机名 
location.pathname // url中的路径部分 
location.protocol // 返回当前页面的端口，如果页面使用的是默认端口（http:80,https:443），则大多数浏览器会显示为0或者不显示
location.search // 查询字符串（执行get请求的URL中问号后面的部分）

document对象

渲染引擎在解析HTML对象时，会生成一个document对象，即文档对象，它是HTML文档的根节点。每一个元素都会生成对应的DOM对象，由于元素之间有层级关系，整个HTML代码解析结束后，会生成一个由不同节点组成的树形结构，成为DOM树。document用于描述DOM树的状态和属性，并提供了很多操作DOM的API。更多内容请查阅DOM。

frames对象

 frames.length;                  //返回当前页面的框架数量
 frames[0].location;             //修改第一个框架的地址

JavaScript 弹窗

//前面的window都可省略
alert("弹出一个信息框");//只有一个确定按钮
confirm("弹出一个选择框");//有确定和取消两个按钮
prompt("弹出一个对话框");//有一个对话框用于输入

定时器

1. 计时器
   开启：setInterval()
   参数1：回调函数
   参数2：毫秒数
   功能：每个指定的毫秒数执行一次回调函数

var timer = setInterval(function(){
    console.log("hello")
}, 1000);

清除：clearInterval()
通过事件触发

document.onclick = function(){
  clearInterval(timer);
}

2. 延时器
   开启：setTimeout()
   参数1：回调函数
   参数2：毫秒数
   功能：延迟指定的毫秒数之后，只执行一次回调函数

            var t = setTimeout(function(){
                console.log("hello")
            }, 5000);

清除：clearTimeout()
通过事件触发

 document.onclick = function(){
      clearTimeout(t);
 }