• JavaScript 由哪几部分组成
  • 理解「宿主环境」是啥
  • 理解「ECMAScript」、「JavaScript」、「NodeJS」之间的关系
  • 理解「DOM」是啥
  • 理解「BOM」是啥

虽然 JavaScript 和 ECMAScript 基本上是同义词，但 JavaScript 远远不限于 ECMA-262 所定义的那样。没错，完整的 JavaScript 实现包含了以下几个部分（见图 1-1）：

  • 核心（ECMAScript）
  • 文档对象模型（DOM）
  • 浏览器对象模型（BOM）

image.png

1.2.1 ECMAScript

ECMAScript，即 ECMA-262 定义的语言，并不局限于 Web 浏览器。事实上，这门语言没有输入和输出之类的方法。ECMA-262 将这门语言作为一个基准来定义，以便在它之上再构建更稳健的脚本语言。Web 浏览器只是 ECMAScript 实现可能存在的一种宿主环境（host environment）。宿主环境提供 ECMAScript 的基准实现和与环境自身交互必需的扩展。扩展（比如 DOM）使用 ECMAScript 核心类型和语法，提供特定于环境的额外功能。其他宿主环境还有服务器端 JavaScript 平台 Node.js。

如果不涉及浏览器的话，ECMA-262 到底定义了什么？在基本的层面，它描述这门语言的入下部分：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 全局对象

ECMAScript 只是对实现这个规范描述的所有方面的一门语言的称呼。JavaScript 实现了 ECMAScript，而 NodeJS 同样也实现了 ECMAScript。

也就是说，本书中所介绍的所有知识，除了与 DOM、BOM 相关的内容是和浏览器宿主环境相关的，其他都是 ES 自带的东西，这些东西无论是在浏览器环境、Node 环境、亦或是其它宿主环境下，都是一致的。

1. ECMAScript 版本

一共介绍了 10 个版本，每个版本都新增了些啥，简单了解即可，也不用记，常用的、好用的，代码写多了自然就记住了。

2. ECMAScript 符合性是什么意思

介绍要成为 ECMAScript 的实现，必须满足的条件有哪些。

3. 浏览器对 ECMAScript 的支持

目前各厂家的浏览器对 ES 的支持情况，可以查阅：http://kangax.github.io/compat-table/es6/

不过也没有必要了解，知道 es 兼容性这东西有地儿可查即可。后边使用框架来写代码时，只要编写简单的配置，编译后的打包结果会帮我们处理好兼容性问题。

1.2.2 DOM

文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在 HTML 中使用扩展的 XML。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。

比如下面的 HTML 页面：

  1. <html>
  2.   <head>
  3.     <title>Sample Page</title>
  4.   </head>
  5.   <body>
  6.     <p> Hello World!</p>
  7.   </body>
  8. </html>

image.png

DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API，可以轻松地删除、添加、替换、修改节点。

1. 为什么 DOM 是必需的

感觉标题起错了，应该叫「为什么 DOM 标准的统一是必需的」。

期初，不同浏览器对 DOM 的实现不一致，也就是标准不统一，那时候的开发者，得面向浏览器编程。给微软家的 IE 写一套，还得再给网景家的 Netscape Navigator 写一套，因为它们两家的标准不一致，一套代码在俩浏览器上跑起来的效果是不一样的。如果又来一浏览器，标准还是不一样，那还得再写。

于是，万维网联盟（W3C，World Wide Web Consortium）开始了制定 DOM 标准的进程。

2. DOM 级别

DOM Level 1 映射 XML 文档、2 和 3 都是在前者的基础上不断扩展新功能。

⚠️
DOM 并非只能通过 JavaScript 访问，而且确实被其他很多语言实现了。不过对于浏览器来说，DOM 就是使用 ECMAScript 实现的，如今已经成为 JavaScript 语言的一大组成部分。

3. 其他 DOM

基于 DOM Level 1 映射的 XML 文档，其它语言也发布了自己的 DOM 标准，都新增了该语言独有的 DOM 方法和接口。

  • 可伸缩矢量图（SVG，Scalable Vector Graphics）
  • 数学标记语言（MathML，Mathematical Markup Language）
  • 同步多媒体集成语言（SMIL，Synchronized Multimedia Integration Language）

它们仨是 W3C 推荐标准，对于前端开发者而言，重点在于 SVG。

4. Web 浏览器对 DOM 的支持情况

查阅浏览器对 DOM 的支持情况：https://caniuse.com/

知道这东西可以查即可，感觉这玩意儿也没必要知道。目前的主流浏览器，对 DOM 的支持都 OK，不需要咋们担忧。

1.2.3 BOM

浏览器对象模型（BOM，Browser Object Model）用于支持访问和操作浏览器的窗口。

使用 BOM，开发者可以操控浏览器显示页面之外的部分。而 BOM 真正独一无二的地方，当然也是问题最多的地方，就是它是唯一一个没有相关标准的 JavaScript 实现。

HTML5 改变了这个局面，这个版本的 HTML 以正式规范的形式涵盖了尽可能多的 BOM 特性。由于 HTML5 的出现，之前很多与 BOM 有关的问题都迎刃而解了。

总体来说，BOM 主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的扩展都归在 BOM 的范畴内。比如：

  • 弹出新浏览器窗口的能力；
  • 移动、缩放和关闭浏览器窗口的能力；
  • navigator 对象，提供关于浏览器的详尽信息；
  • location 对象，提供浏览器加载页面的详尽信息；
  • screen 对象，提供关于用户屏幕分辨率的详尽信息；
  • performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；
  • 对 cookie 的支持；
  • 其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject；

因为在很长时间内都没有标准，所以每个浏览器实现的都是自己的 BOM。有一些所谓的事实标准，比如对于 window 对象和 navigator 对象，每个浏览器都会给它们定义自己的属性和方法。

现在有了HTML5，BOM 的实现细节应该会日趋一致。关于 BOM，本书会在第 12 章再专门详细介绍。

H5，也就是 HTML5，它也是咋们前端的一个学习重点。