JavaScirpt(JS)——BOM浏览器对象模型

一、BOM概念

　　BOM（Browser Object Model）即浏览器对象模型。可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

　　BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

　　BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象时window。

　　BOM由一系列相关的对象(Window\Navigator\Screen\History\Location)构成，并且每个对象都提供了很多方法与属性。

二、BOM内容

　　与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

　　通常浏览器特定的JavaScript扩展都被看做BOM的一部分，这些扩展包括：

弹出新的浏览器窗口
移动、关键浏览器窗口以及调整窗口大小
提供Web浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对cookie的支持
IE扩展了BOM，加入ActiveXObject类，可以通过JavaScript实例化ActiveX对象

JavaScirpt(JS)——BOM浏览器对象模型

　　上图为BOM结构图，window对象是BOM的顶层（核心）对象，所有对象都是通过它延伸出来的，也可以称为window的子对象；BOM也是BOM的一部分。

三、window对象

　　window对象是js中的顶级对象；所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法；window对象下的属性和方法在调用时，可以省略window。

1、系统对话框及BOM输出

（1）alert(message)：显示带有一段消息和一个确定按钮的警告框

　　alert(11)是window.alert(11)的简写，它是window的子方法。常用于浏览器调试

（2）prompt('message', defaultValue): 显示可提示用户输入的对话框

// prompt('message',defaultValue)
var pro = prompt('路飞学城',443);
console.log(pro);  // 显示输入在对话框的内容

（3）confirm(message)：显示带有一段消息以及确认按钮和取消按钮的对话框

// confirm() :如果点击确定返回true，如果点击取消，就返回false
var m = confirm("学习BOM");
console.log(m);

（4）print()：打印当前窗口的内容

function printLuffy() {
    // window.print();
    print();   // 直接调用打印机
}

（5）find()：

function findLuffy() {
    var m2 = confirm("学习");
    find(m2);
}

总结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="printLuffy()">打印</button>
    <button onclick="findLuffy()">查找</button>
</body>
<script type="text/javascript">
    // 1.js的核心 ECMAScript  DOM  BOM
    // BOM:Browser Object Model 浏览器对象模型
    // 核心 浏览器

    // 输出  屏幕宽高  滚动宽高  setInterval等方法  window.open() close() location

    // 1.alert()

    // 2.用于浏览器的调试
    console.log('路飞学城');

    // 3.prompt('message',defaultValue)
    var pro = prompt('路飞学城',443);
    console.log(pro);  // 显示输入在对话框的内容

    // 4.confirm() :如果点击确定返回true，如果点击取消，就返回false
    var m = confirm("学习BOM");
    console.log(m);
    
    function printLuffy() {
        // window.print();
        print();   // 直接调用打印机
    }
    function findLuffy() {
        var m2 = confirm("学习");
        find(m2);
    }
</script>
</html>

BOM输出示例代码