JavaScript：BOM

BOM和DOM

BOM：浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象。

DOM：文档对象模型，它定义了访问和操作HTML文档的标准，即所有HTML元素的对象和属性以及访问它们的方法。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C。

关系图

BOM

Browser  Object  Model，即浏览器对象模型。他不是一个对象，它是对象的集合，包含window、location、history、navigator等。可以通过这些对象来操作浏览器窗口和里面的文档。

在BOM中最顶层的对象是window对象，其它对象是window的一个属性，只不过这些属性本身也是对象。

BOM并没有统一标准，会有浏览器兼容问题。

顶层对象：window

window对象代表的是打开的浏览器窗口，该对象不需要创建，浏览器窗口打开后会自动创建window。

该对象是一个全局对象，所谓全局对象就是指文档中的所有的全局变量或方法都相当于window对象添加的属性，就可以利用window.的形式来调用属性和方法。

需要注意window对象可以使用关键字this表示，通常情况下window和this都是省略不写。

方法

1.alert()

作用：以提示框的形式输出信息

格式：window.alert(输出信息);

注意：该方法具有阻断程序执行的功能

2.confirm()

作用：以提示框的形式提供“确定”和“取消”两种状态的选择

格式：window.confirm(提示语句);

注意：如果点击的是“确定”，那么confirm函数的返回值为true，否则为false

3. prompt()

作用：提示用户输入数据

格式：window.prompt("提示文字", 默认值);

注意：返回值的类型为字符串类型，另外该函数的第二个参数可以省略

4.isFinite()

作用：判断一个数据是否为有限数据

格式：window.isFinite(数据);

注意：

• 如果测试的数据是有限数据，那么返回值为true
• 如果测试的数据是无限数据，那么返回值为false
• isFinite方法在执行时会自动调用Number方法将参数转换为数值型，如window.isFinite("100");结果为true

5.isNaN()

作用：判断一个数据是否为NaN

格式：window.isNaN(数据);

注意：

• 如果测试的数据为数值型，那么返回值为false，如window.isNaN(100)，返回值为false
• 如果测试的数据为非数值型，那么返回值为true，如window.isNaN(3*"a")，返回值为true
• 该函数在执行时会自动调用Number方法，将参数转换为属性值，如果能转换为属性值型，结果false，如果转换不了，那么结果为true，window.isNaN("a");结果为true

6.open()

作用：打开一个新的浏览器窗口，返回值为代表该窗口的window对象

格式：window.open("新窗口地址", "窗口名称", "窗口的特性");

注意：

• 第二个参数，即窗口名称可以省略，但是如果省略，那么每次都会以新窗口的形式展现，如果加名称，那么第一次会是一个新窗口，以后会在该窗口中刷新
• 第三个参数中常用的属性
  • width：设置窗口宽度
  • height：设置窗口高度
  • left：设置窗口距离屏幕左侧距离
  • top：设置窗口距离屏幕顶端距离
  • scrollbars：设置是否显示滚动条，默认不显示，属性值为yes或no（默认）
  • resizable：设置是否允许调节子窗口大小，属性值为yes或no（默认）
  • status：设置是否显示状态栏，属性值为yes或no（默认）
  • location：设置是否显示地址栏，属性值为yes或no（默认）
  • toolbar：设置是否显示工具栏，属性值为yes或no（默认）

7.close()

作用：关闭当前窗口

格式：window.close();

注意：火狐浏览器中默认情况下不允许使用JS关闭浏览器窗口，解决方法，在地址栏中输入about:config，然后搜索dom，然后更改dom.allow-scripts-close-window的值为true

8.setInterval()（循环定时器，用在小广告上时，利用格式：节点名.style.display = "none"设置消失事件）

作用：能偶重复执行某段代码，类似于循环，但是和循环的区别是，它可以设置重复执行的间隔时间

格式：window.setInterval(要重复执行的代码, 时间间隔);

注意：

• setInterval函数的第一个参数通常为一个函数，可以是普通函数，也可以是匿名函数，如果是普通函数，那么此处就是函数名，不加括号（如：格式为 fn  而不是fn()）
• setInterval函数的第二个参数为时间间隔，单位为毫秒值，1秒=1000毫秒
• 该式的返回值为一个整数值，即setInterval的id值，该值可以用来清除setInterval

9.clearInterval()

作用：清除（终止）setInterval函数的执行 

格式：window.clearInterval(id值);

10.setTimeout()（单次定时器）

作用：可以设置延迟执行某段代码的效果

格式：window.setTimeout(要执行的语句段, 延迟的时间);

注意：

• 该函数的第一个参数通常是一个函数，可以是函数名的形式，也可以是匿名函数
• 该函数的第二个参数是程序执行所需的延迟时间，单位为毫秒值
• 该函数的返回值为一个整数，该数值常用于clearTimeout方法里面，用来终止setTimeout方法的执行
• 该函数可以用来模拟setInterval的重复执行效果，示例如下

window.setTimeout(fn,  2000);
function fn() {
    window.setTimeout(fn, 2000);
}

11.clearTimeout()

作用：停止setTimeout方法的执行

格式：window.clearTimeout(id值);

window对象的常用事件

onload：当页面中所有元素加载完成后触发该事件

onunload：当页面卸载时触发该事件，注意该事件并不是所有浏览器都支持，IE支持

onscroll：当拉动窗口滚动条时触发该事件

onresize：当浏览器窗口尺寸被改变是触发该事件

window对象表示浏览器中打开的窗口，它有以下重要特性

window.self：当前窗口

window.parent：当前窗口的父窗口

window.top：当前窗口的顶级父窗口

window.opener：打开当前窗口的父窗口

浏览器当前URL信息对象：location

属性

1.href：作用是设置或者获取地址栏中的地址信息

获取：window.location.href

设置：window.location.href = 值;

注意：通过href属性来跳转页面会产生浏览记录

2.protocol属性

作用：是获取地址信息中的协议部分

格式：window.location.protocol

3.host属性

作用：获取地址信息中的主机名和端口号

格式：window.location.host

4.hostname属性

作用：获取地址信息中的主机名，不包含端口号

格式：window.location.hostname

5. port属性

作用：获取地址信息中的端口号

格式window.location.port

6.pathname属性

作用：获取地址信息中的文件的相对路径

格式：window.location.pathname

7.search属性

作用：获取表单在提交时的字段名称和对应的值

格式：window.location.search

方法

1.reload方法

作用：刷新页面

格式：location.reload(参数); 参数为false或者是true

• false：意味着从缓存中加载文档
• true：意味着从服务器加载文档

2.replace方法

作用：用一个新的文档替换当前文档，其实就是实现页面跳转

格式：location.replace(新的文档地址);

注意：该方法不会产生浏览记录

3.assign方法

作用：重新加载一个文档

格式：location.assign(新的文档地址);

注意：该方法会产生浏览记录

浏览器本身信息对象：navigator

1.appVersion属性：作用是获取浏览器的版本信息，不准确

2.onLine属性：作用是判断是否处于联网状态，返回值为true（联网）或false（没有联网）

3.cookieEnabled属性：作用是判断浏览器是否开启cookie，返回值为true（开启）、false（没有开启）

客户端屏幕信息对象：screen

1.width：获取屏幕的实际宽度

2.height：获取屏幕的实际高度

3.availWidth：屏幕宽度减去任务栏的宽度，availWidth=width-任务栏宽度

4.availHeight：屏幕高度减去任务栏的高度，availHeight=height-任务栏高度

注意availWidth和availHeight存在浏览器兼容问题

浏览器访问历史信息对象：history

1.length属性：作用是获取浏览记录的长度（次数），谷歌和火狐浏览器中length的默认值为1，而IE浏览器中默认值为0

2.back方法：作用是跳转到上一个浏览记录，模拟浏览器的后退按钮

3.forward方法：作用是跳转到下一个浏览记录，模拟浏览器的前进按钮

4.go方法：该方法既可以实现后退效果，也可以实现前进效果

格式：history.go(参数);

注意：

• 如果参数为正数表示跳转到下一个浏览记录，即前进
• 如果参数为负数表示跳转到后一个浏览记录，即后退
• 但是要注意该方法可以通过值的大小表示跳转的距离，如history.go(2)表示跳转到下两个浏览记录，如果history.go(-3)表示跳转到后3个浏览记录