这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

BOM

BOM的全称为Browser Object Model，被译为浏览器对象模型。

BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗之间通信等功能。

BOM由一系列对象构成，这些对象可以简单理解为是由各个浏览器所提供的，例如Window对象等。

Window对象

BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口。

在浏览器环境中，Window对象具有双重角色。该对象既是允许JavaScript逻辑访问浏览器窗口的一个对象，又是ECMAScript规范中的Global全局对象。

这就说明了，在浏览器环境中运行JavaScript逻辑时，在全局作用域中定义的对象、变量和函数都是 Window对象的属性和方法。

也可以通过Window对象访问Global全局对象的属性和方法。例如NaN、undefined和parselnt()方法等。

全局作用域

在浏览器环境中，由于ECMAScript规范中Window对象代表了Global全局对象，因此所有定义在全局作用域中的变量和函数，都可以通过window对象的属性和方法访问。

// 全局变量 - window对象的属性
var v = 100;
console.log(v);//100
console.log(window.v);//100
// 函数 —— window对象的方法
function fun() {
    console.log('this is function...');
}
fun();//this is function...
window.fun();//this is function...

Window对象的属性

Window对象的属性数量较多，包含了浏览器窗口的基本信息、也包含了一些复杂的信息。可以人为将Window对象分为以下三类:

BOM中其他对象，例如Navigator对象等。
一些有关浏览器窗口的基本信息等，这些属性多属于DOM 0级别，并不是W3C标准规范。
包含了大量有关HTML 5版本新增的功能等。

浏览器窗口的宽度和高度

Window对象提供的属性中可以获取当前浏览器窗口的宽度和高度，具有两组:

innerWidth和innerHeight属性

只读属性，返回当前浏览器窗口的可视宽度和高度。如果存在滚动条，也包含滚动条。
outerWidth和outerHeight属性

只读属性，返回当前浏览器窗的整个宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟随窗口变化</title>
    <style>
        body{
            margin: 0;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<img id="img" src="car.jpg" >
<script>
    var img = document.getElementById('img');

    // resize事件：当窗口大小改变时触发
    window.addEventListener('resize',function () { //resize重新设置大小
        console.log(window.innerWidth,window.innerHeight)
    });
</script>
</body>
</html>

Window对象与self属性

Window对象的self属性返回当前浏览器窗口的只读属性。换句话讲，self属性返回的是Window对象的引用。

console.log(window === window.self);// true

Window 对象的方法

Window对象的方法，主要从以下几方面进行学习:

系统提示框:alert(）方法、confirm()方法和prompt()方法
打开与关闭窗: open()与close()方法、showModaIDialog()
DOM规范标准 0 级别的一些方法
定时器:setTimeout()与clearTimeout()、setlnterval()与clearlnterval()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打开与关闭浏览器窗口</title>
</head>
<body>
<button id="btn">按钮1</button>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function () {
        window.open('http://localhost:63342/JavaScript%E4%BB%A3%E7%A0%81%E7%BB%83%' +
            'E4%B9%A0/8%E6%9C%8819%E6%97%A5/12%20%E5%9B%BE%E7%89%87%E8%B7%9F%' +
            'E9%9A%8F%E7%AA%97%E5%8F%A3%E5%8F%98%E5%8C%96.html?')
    });
    // alert('xxxx');
    var result=confirm('确认退出？');
    alert(result);
</script>
</body>
</html>

BOM 浏览器对象模型

BOM