javascript之BOM

偏执的太偏执、 2022-08-07 10:38 143阅读 0赞

**        BOM(BrowserObjectModel)也叫浏览器对象模型，描述与浏览器进行交互的方法和接口。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。**

**        JavaScript由三部分组成：ECMAScript,BOM，DOM。BOM提供了很多对象，用于访问浏览器的功能。下面介绍浏览器的三个公共对象：window对象，location对象，history对象。**

**![Center][]**

**一、window对象**

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

**![Center 1][]**

**1.对象的属性和方法  
        window对象有一系列的属性，这些属性本身也是对象。**

**![Center 2][]**

**        window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和alert()是一个意思。**

**2.系统对话框  
        浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。**

**（1）弹出警告**

alert('Lee');//直接弹出警告

**（2）确认和取消**

confirm('请确定或者取消');//这里按哪个都无效
    if(confirm('请确定或者取消'))
    {
    //confirm本身有返回值
    alert('您按了确定！');//按确定返回true
    }
    else
    {
    alert('您按了取消！');//按取消返回false
    }

**（3）输入提示框**

var num=prompt('请输入一个数字',0);//两个参数，一个提示，一个值
    alert(num);//返回值可以得到

**3、新建窗口**

**使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：**

**1.要加载的URL；  
2.窗口的名称或窗口目标；  
3.一个特性字符串；  
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值**

open('http://www.baidu.com');//新建页面并打开百度
    open('http://www.baidu.com','baidu');//新建页面并命名窗口并打开百度
    open('http://www.baidu.com','_parent');//在本页窗口打开百度,_blank是新建

**二、location对象**

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

<strong><span style="font-size:18px;">alert(location);//获取当前的URL</span></strong>

**![Center 3][]**

![Center 4][]

**三、history对象**

**history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起**

**![Center 5][]**

**（1）跳转到前一个URL**

function back(){//跳转到前一个URL
    history.back();
    }

**（2）跳转到下一个**

function forward(){//跳转到下一个URL
    history.forward();
    }

**（3）跳转指定历史记录的URL**

function go(num){//跳转指定历史记录的URL
    history.go(num);
    }

**PS：可以通过判断history.length==0，得到是否有历史记录**

**总结：**

**        JavaScript的BOM弹出新浏览器窗口的能力；移动、关闭和更改浏览器窗口大小的能力；可提供WEB浏览器详细信息的导航对象；可提供浏览器载入页面详细信息的本地对象。总之：BOM提供了可以与浏览器窗口进行互动的对象结构，增加了用户体验度。**

[Center]: /images/20220805/d96bf9cadc7b4447a97787d64acbb311.png
[Center 1]: /images/20220805/faf329926bb6453ca3ab0da1f18e8ac5.png
[Center 2]: /images/20220805/fdb47bc3bcc34428a26bdcfd0fff9030.png
[Center 3]: /images/20220805/e164bd6ee635400a8aea9a72605b11dd.png
[Center 4]: /images/20220805/217eab791e1546648306ea8ea7ae2a5f.png
[Center 5]: /images/20220805/cab999294fc64196987437218c1f0604.png