【JavaScript 7—基础知识点】：BOM

一、基础知识

1.1，什么是BOM

BOM（browser object model）：也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。ＢＯＭ缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准，所以，BOM本身是没有标准的或者还没有哪个组织去标准它。

1.2，总体知识

现在学习到的知识，主要是将BOM分成三个对象的学习，分别是window对象、location对象和history对象。

 

二、Window对象

2.1，定义

是BOM的核心对象，表示浏览器的一个实例 ，window对象处于JavaScript的结构最顶层，对于每个打开的窗口，系统都会自动为其定义Window对象。

2.2，结构

 

说明：Window对象是最顶层的对象，其下有6大属性，这6大属性本身也是对象。其document属性下，又包括5大属性，其也都是对象。因为Window对象为最顶层的对象，所以，在调用其子对象时，可以不用指明Window。如：下面两句话的效用是一致的！

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">window.alert（“测试”）;
alert（“测试”）;</span></span>

 

2.3，系统对话框

2.3.1，alert（）方法

直接弹出对话框：

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">alert("测试");</span></span>

 

 

 

2.3.2，confirm（）方法

这里有确定和取消按钮，本身可以返回一个布尔值：

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">if (confirm("请选择！")) {
   alert("你按了确认按钮");
}
else {
   alert("你按了取消按钮");
}</span></span>

 

 

 

 

 

 

2.3.3，prompt（）方法

可以在弹出框中输入一个数，然后显示出来：

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var box = prompt("请输入一个数字", 0)
if (box != null) {
    alert(box);
}</span></span>

 

 

 

 

 

2.4，定时器

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var num = 0;
var max = 5;
var id = null;

function box() {
    num++;
    document.getElementById("a").innerHTML += num;
    if (num==max ) {
        clearInterval(id);
        alert("5秒到了！");
    }
}
id=setInterval(box,1000)</span></span>

 

三、Location对象

 

说明：它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上location对象是window对象的属性，也是document对象的属性，所以：window.location和document.location等效。

 

 

 

 

 

四、history对象

这个对象属性，保存着用户上网的记录，从窗口被打开的那一刻算起。

 

<span style="font-size:18px;"><a href="javascript:back();">前一个</a>
    <a href="javascript:forward();">后一个</a>
    <a href="javascript:go(1);">下一个</a></span>

<span style="font-size:18px;">function back() {
    history.back();
}

function forward() {
    history.forward();
}

function go(num) {
    history.go(num);
}</span>

 

五、感想

 

 

这些东西，一个一个看来都很简单，就是一些属性和方法的应用。但觉得还是有必要把基础给整理一下，最大的感受：知道那个东西在哪里出现过，其实也很重要。

有了很多东西之后，建立联系好像变得容易点！