JavaScript BOM编程

一、BOM概述

1.1、什么是BOM

​ BOM是browser object model的缩写，简称浏览器对象模型。

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

​ 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

​ BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

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

​ BOM最初是Netscape浏览器标准的一部分。

1.2、BOM层次结构

​ window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

1.3、BOM可以实现的功能

​ BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。

​ 但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！

二、Window对象

2.1、Window对象的使用

​ window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

​ Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。

​ 同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。

​ 示例：
​ ​ document.write(“www.dreamdu.com”);
​ ​ window.document.write(“www.dreamdu.com”);

​ 也就是说调用window对象的属性或方法可以省略window。

2.2、三种弹出框(重点)

​ 1、alert()：显示带有一段消息和一个确认按钮的警告框。

<script>
    alert("带一条消息和确定按钮的弹出框");
</script>

​ 2、confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值；如果点击确定则返回true,点击取消返回false。

<script>
    confirm("带有一段消息以及确认按钮和取消按钮的对话框");
</script>

​ 3、prompt()：显示可提示用户输入的对话框。第一个参数是提示,第二个参数是默认值(可选);返回值为输入的值，取消返回null；需要注意的是，返回的输入值是一个string类型的数据。

<script>
    prompt("请输入您的姓名:"，”例如:张三”);
</script>

2.3、窗体控制

​ 1、open()：打开一个窗体

​ 语法:window.open(URL,name,[specs]),该方法返回打开窗口的引用

​ 参数介绍:
​ ​ URL​ 可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口

​ ​ name​ 可选。指定窗口的名称。

​ ​ specs​ 一个逗号分隔的项目列表。支持以下值：

​ height=pixels​ 窗口的高度。最小.值为100

​ left=pixels​ 该窗口距离屏幕左侧的位置

​ top=pixels​ 该窗口距离屏幕顶部的位置

​ width=pixels​ 窗口的宽度.最小.值为100

​ 注:窗口相对位置是以屏幕为基准。

<script>
    window.open("page.html","newWind","width=520,height=420,left=100,top=30")
</script>

​ 2、close()：关闭浏览器窗口。

​ 3、moveBy()：可相对窗口的当前坐标把它移动指定的像素。
​ ​ window.moveBy(x,y)
​ ​ x​ 要把窗口右移的像素数,可以是正、负数值。
​ ​ y​ 要把窗口下移的像素数,可以是正、负数值。

​ 4、moveTo()：把窗口的左上角移动到一个指定的坐标。
​ window.moveTo(x,y)
​ ​ x​ 窗口新位置的 x 坐标,可以是正、负数值。
​ ​ y​ 窗口新位置的 y 坐标,可以是正、负数值。

​ 5、resizeTo()：把窗口的大小调整到指定的宽度和高度。
​ resizeTo(width,height)
​ ​ width​ 必需。想要调整到的窗口的宽度。以像素计。
​ ​ height​ 可选。想要调整到的窗口的高度。以像素计。
​ 注: 有最小值

​ 6、resizeBy()：按照指定的像素调整窗口的大小。
​ resizeBy(width,height)
​ ​ width​ 必需。要使窗口宽度增加的像素数。可以是正、负数值。
​ ​ height​ 可选。要使窗口高度增加的像素数。可以是正、负数值。
​ 注: 有最小值

​ 7、focus()：把键盘焦点给予一个窗口。可确保新的窗口得到焦点。

2.4、窗体滚动

​ 1、scrollBy(xnum,ynum)：按照指定的像素值来滚动内容。
​ ​ xnum​ 把文档向右滚动的像素数。
​ ​ ynum​ 把文档向下滚动的像素数。

<script type="text/javascript">
    function scrollWindow() {
        window.scrollBy(30,30)
    }
</script>

​ 2、scrollTo(xpos,ypos)：把内容滚动到指定的坐标。
​ ​ xpos​ 要在窗口文档显示区左上角显示的文档的 x 坐标。
​ ​ ypos​ 要在窗口文档显示区左上角显示的文档的 y 坐标。

<script type="text/javascript">
    function scrollWindow() {
        window.scrollTo(0,0)
    }
</script>

2.5、窗体打印

​ print()：打印当前窗口的内容。

​ 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。

2.6、定时器(重点)

​ window对象中处理时间和间隔的函数有4个：setTimeout()函数、clearTimeout()函数、setInterval()、clearInterval()。

2.6.1、延时型定时器

​ setTimeout()：定义延时定时器,在指定的时间后调用函数

​ 语法：
​ ​ setTimeout(fun,time);

​ 其中参数fun：函数体或函数名;time指定时间，单位为毫秒。其返回值有一个id,代表当前的这个setTimeout()函数。

​ clearTimeout(id)：清除延时定时器,取消指定id的setTimeout函数。
示范代码：

   setTimeout(function () {
        document.write("隔3秒后触发");
    }, 3000)    //在3秒后输出

    setTimeout(fun1, 5000);     //在5秒后输出

    function fun1() {
        document.write("函数名的方式5秒后触发");
    }

2.6.2、间隔型定时器

​ setInterval()：定义间隔型定时器,在间隔指定的事件后重复调用函数。

​ 语法：
​ ​ setInterval(fun1,time)

​ fun：函数体或函数名，time指定的时间，单位为毫秒。会返回一个值id。

​ clearInterval(id)：清除间隔型定时器

​ 参数id是setInterval()函数返回的值，根据这个值可以停止返回值为idsetInterval()的执行。

​ 示范代码：

var h = setInterval(function () {
    document.write("3秒输出一次<br/>");
}, 3000);

​ 注意，JavaScript是单线程的，因此，这个定时函数实际上是通过插入执行队列的方式来实现。

2.6.3、动态时间效果

​ 由于涉及到时间的显示问题，所以要用到日期对象Date，还有时间在不停地走，因此需要不断地调用函数，所以要用到Windows的定时器setInterval( )方法。

<script>
function disptime(){
    var today = new Date(); //获得当前时间
    var hh = today.getHours();  //获得小时、分钟、秒
    var mm = today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
}
    window.setInterval(disptime,1000);
</script>

2.7、window对象常用属性(重点)

​ innerWidth​ 返回窗口的文档显示区的宽度。

​ innerHeight​ 返回窗口的文档显示区的高度。

​ name​ ​ 设置或返回窗口的名称。

​ outerheight​ 返回窗口的外部高度。

​ outerwidth​ 返回窗口的外部宽度。

三、History对象

​ History 对象包含用户（在浏览器窗口中）访问过的 URL。
​ History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

3.1、History对象属性

属性	说明
length	返回当前窗口历史列表中的网址数

3.2、History对象方法

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

History对象：back() 方法
​ back() 方法可加载历史列表中的前一个 URL（如果存在）。
​ 调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

History对象：forward() 方法
​ forward() 方法可加载历史列表中的下一个 URL。
​ 调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

History对象：go() 方法
​ go() 方法可加载历史列表中的某个具体的页面。
​ 该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

​ history.go(number|URL)

四、Location 对象(记)

​ Location 对象包含有关当前 URL 的信息。
​ Location 对象是 window 对象的一部分，可通过 window.location 属性对其进行访问。

4.1、Location对象属性

属性	描述
hash	返回一个URL的锚部分(锚点)
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分 ？之后

4.2、Location对象方法

方法	说明
assign()	载入一个新的文档 location.assign(URL)
reload()	重新载入当前文档 location.reload();
replace()	用新的文档替换当前文档 location.replace(newURL)

​ window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

​ window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

五、Screen 对象

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

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每像素的位数）
width	返回屏幕的总宽度

六、Navigator 对象(记)

​ Navigator 对象包含有关浏览器的信息。

属性	说明
appCodeName	返回浏览器的代码名appCodeName 属性是一个只读字符串，声明了浏览器的代码名。在所有以 Netscape 代码为基础的浏览器中，它的值是 “Mozilla”。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 “Mozilla”。
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

说明：
​ 1.navigator.appCodeName：IE/Firefox/Chrome 系列浏览器中，它的值都是 “Mozilla”。
​ 2.navigator.appName：IE/Firefox/Chrome 系列浏览器中 均为 Netscape。

七、Frames对象

frames 属性返回窗口中所有命名的框架。
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。