副队长JavaScript教程(60)-BOM 初识：window 对象与浏览器模型

点此查看 所有教程、项目、源码导航

文章目录

[1. 背景](#1. 背景)
[2. 什么是 BOM](#2. 什么是 BOM)
[3. window 对象的特点](#3. window 对象的特点)
- [3.1 每一个浏览器标签页，对应一个独立的 window 对象](#3.1 每一个浏览器标签页，对应一个独立的 window 对象)
- [3.2 全局变量，都会变成 window 的属性](#3.2 全局变量，都会变成 window 的属性)
- [3.3 全局函数，也是 window 的方法](#3.3 全局函数，也是 window 的方法)
[4. 三个基础弹窗（window 自带）](#4. 三个基础弹窗（window 自带）)
- [4.1 alert () 提示弹窗](#4.1 alert () 提示弹窗)
- [4.2 confirm () 确认弹窗](#4.2 confirm () 确认弹窗)
- [4.3 prompt () 输入弹窗](#4.3 prompt () 输入弹窗)
[5. BOM 和 DOM 的关系总结](#5. BOM 和 DOM 的关系总结)
[6. 小结](#6. 小结)

1. 背景

前面我们学习了 DOM，DOM 是用来操作网页里的标签、元素的，它只负责文档内容。

而 JavaScript 在浏览器里运行，除了网页本身，浏览器还提供了另外一套能力：控制浏览器窗口、获取地址栏、弹窗、定时器、访问历史记录等等。这一套模型，就是 BOM。

这里我们再回顾之前讲过的概念：

ECMAScript（ES）是语言本身的语法规范，变量、循环、函数、对象这些都属于 ES；

浏览器在 ES 基础上，提供了两套核心 API：

DOM：文档对象模型，操作页面上的 HTML 标签
BOM：浏览器对象模型，操作浏览器窗口本身

简单一句话区分：DOM 管页面里面的内容，BOM 管浏览器窗口。

2. 什么是 BOM

BOM 全称 Browser Object Model，浏览器对象模型。

BOM 没有像 ES 那样严格统一的标准，但是各个浏览器都约定好了一套通用的对象，我们可以通过这些对象和浏览器窗口交互。

BOM 的顶层对象就是 window，浏览器打开一个页面，就会自动创建一个 window 对象。

window 是 BOM 的根，DOM 里面的 document 对象，其实也是 window 下面的一个属性，完整写法是 window.document。

小知识点：在全局作用域里，window 可以省略不写。我们之前写的 document，本质就是 window.document。

window 里面包含很多子对象，也是我们后面要依次学习的：

document：DOM 文档对象（我们已经学过）
alert /confirm/prompt：弹窗
setTimeout、setInterval：定时器
location：地址栏信息、页面跳转
history：浏览器访问历史
navigator：浏览器信息

3. window 对象的特点

3.1 每一个浏览器标签页，对应一个独立的 window 对象

打开多个标签页，就有多个 window，标签页之间默认互相隔离。

3.2 全局变量，都会变成 window 的属性

我们在最外层直接用 var 定义的变量，会挂载到 window 上。

js 复制代码

var name = "张三";
console.log(window.name);

这个特点也说明：window 就是全局作用域。

注意：后面我们尽量少随意定义全局变量，避免变量冲突。

3.3 全局函数，也是 window 的方法

我们直接写 alert ()，完整写法是 window.alert ()，window 可以省略。

js 复制代码

// 下面两句等价
alert("你好");
window.alert("你好");

4. 三个基础弹窗（window 自带）

这三个是 window 的方法，属于 BOM 的基础能力，我们先认识：

4.1 alert () 提示弹窗

只有提示文字，只有确定按钮，一般用来单纯提示信息。

js 复制代码

alert("欢迎学习BOM");

特点：弹窗弹出后，代码会暂停执行，点击确定之后，代码继续往下走。

效果：

4.2 confirm () 确认弹窗

有确定、取消两个按钮，有返回值

点击确定，返回 true；点击取消，返回 false。

js 复制代码

var res = confirm("确定要删除这条数据吗？");
console.log(res);

效果：

4.3 prompt () 输入弹窗

可以让用户在弹窗里输入文字，点击确定返回输入的字符串，点击取消返回 null。

js 复制代码

var inputText = prompt("请输入你的名字");
console.log(inputText);

效果：

实战提醒：这一类弹窗会阻塞页面，项目正式开发很少大量使用，现阶段主要用来调试、简单交互。

5. BOM 和 DOM 的关系总结

window 是 BOM 根对象
document 是 window 的属性，属于 DOM 入口
DOM：操作页面元素（标签、文本、属性、样式）
BOM：操作浏览器窗口（弹窗、地址栏、定时器、历史记录）

简单记忆：

window 里面装着 document，BOM 包含 DOM。

6. 小结

BOM 是浏览器对象模型，用来操作浏览器窗口；DOM 用来操作页面文档。
window 是 BOM 的顶层对象，一个标签页对应一个 window。
全局变量、全局函数都属于 window；window 可以省略书写。
alert、confirm、prompt 是 window 自带的弹窗方法，会阻塞代码执行。