D21 - 走！去浏览器吃 好味双响 BOM DOM 饭

前言

铁人倒数十天！利用最後时间来分享浏览器，这里才是真正的战场。
在 ECMAScript 上并没有提供网页的操作方法，事实上这些操作都是由各家浏览器提供的，那怎麽达到互动呢？靠的是用 JavaScript 呼叫 BOM、DOM 提供的 API 来控制，因此可以说在浏览器上的 JavaScript 的三大核心成员分别为：

• JavaScript 核心 （ECMAScript标准）
• BOM（Browser Object Model）浏览器物件模型
• DOM（Document Object Model）文件物件模型

其中的 DOM 与 BOM 是由浏览器执行环境所提供，因此在 node 环境下不会有这两个部分。

今天来讲 BOM 和 DOM 的定义，明天开始搭配实作！

图片来源

BOM 浏览器物件模型

BOM 是浏览器所有功能的核心，与网页的内容无关，因为在 DOM level 1 标准前就已经存在，因此也有人称为 「Level 0 DOM 」。

• BOM 的核心是 window，也是全域物件，代表着浏览器的视窗

window 在浏览器中的主要角色是：

1. 全域物件 Global object
2. JavScript 用来和浏览器沟通的窗口

所以所有在全域下宣告的变数、函式、物件等，都会变成全域 window 的属性，如 var a = 1，也可以使用 window.a 印出 a 的值。

[[求知小学堂]]
看到这部分的时候，尝试用 let b = 2 宣告另一个变数，结果无法透过 window.b印出，只有以 var 宣告的变数才能用 window.property 印出，这是为什麽呢？？？

在 stack overflow 找到的解答是：
在全域环境记录 Global environment record下实际上又分成两种不同的环境记录：object environment record 与 declarative environment record，如下图所示

简单来说，在全域下const, let, and class 宣告的内容绑定在 Declarative environment record 内，而var 和 function declarations 绑定在 Object environment record，而全域物件 window 参照的是 Object environment record，因此使用 var 或是 function delcaration 的变数可以用 window. 的方式印出。
详细内容可以参考这篇：Deep JavaScript

BOM 的核心 window

图片来源

来介绍 window 内主要内容：

• document：代表整个 HTML 文件，是 Document 的实例，下一段着重介绍。

• navigator：可以取得浏览器的资料，通常是为了进行侦测浏览器类型才会使用这个物件。

• frames：收集了视窗中有的 iframe 对应物件。

• history：包括浏览器的历史，基於安全与隐私无法直接透过 JavaScript 取得浏览历史，但可以操作回到上一页、下一页的动作。
  window.history.back()： 回到上一页
  window.history.forward()： 回到下一页
  window.history.go(2)： 回到下两页

• location：代表 HTML 页面的 URL，有内建方法可以重载或取代页面。
  window.location.reload()：重新整理
  window.location.replace('https://www.youtube.com/')： youtube 页面取代现在的页面
  （前往 youtube 的意思）

• screen：视窗目前所处的萤幕资讯，像是宽、高、颜色深度等。

window 物件下内建还内建了其他方法，介绍几个有趣的：

• window.alert('JavaScript is not that easy!')： 跳出警告视窗
• window.confirm('Do you love JS')： 跳出确认视窗，有取消和确定两个按钮
• window.prompt('How much do you love JavaScript')： 跳出输入视窗，可以输入字元
• window.close()： 关闭视窗
• window.open()： 开新视窗

DOM 文件物件模型

DOM 全名是 Document Object Model 文件物件模型，是一个将 HTML 文件以树状的结构来表示的模型，组合起来的称为「DOM Tree」。

DOM-Tree 的示意结构如下，最根部的地方就是 document，往下延伸出一个个 HTML 节点，一个节点就是一个标签，DOM API 就是定义了让 JavaScript 可以存取、改变 HTML 结构、样式和内容的方法，甚至是对於节点的事件绑定，让我们可以做到与使用者在网页上的互动。

图片来源

BOM 与 DOM 差异

BOM 是 JavaScript 与「浏览器」沟通的窗口，不涉及网页内容，完全依赖於浏览器厂商实作，本身无标准规范
DOM 是 JavaScript 用来控制「网页」的节点与内容的标准，有着 W3C 所制定的标准规范。

Reference

008天重新认识 JavaScript
JavaScript 技术手册
Deep JavaScript

结语

理解 BOM 与 DOM 的关系後，明天介绍如何撷取到 DOM 上的节点元素！