JavaScript 语言最初是为 Web 浏览器创建的。此后,它发展成为一种有多种用途和平台的语言。

平台可以是一个浏览器,一台网络服务器,一台洗衣机或其他主机。它们每个都提供特定于平台的功能。JavaScript 规范调用了主机环境

主机环境提供语言核心以外的平台特定对象和功能。Web 浏览器提供了一种控制网页的手段。Node.JS 提供了服务器端功能,等等。

以下是浏览器在 JavaScript 中运行时的一个鸟瞰图:

有一个叫做 window 的“根”对象。它有两个角色:

  1. 首先,它是 JavaScript 代码的全局对象,如 全局对象 一章所述。
  2. 其次,它代表“浏览器窗口”并提供控制它的方法。

例如,在这里我们将其用作全局对象:

function sayHi() {
  alert("Hello");
}

// global functions are accessible as properties of window
window.sayHi();

在这里,我们将它用作浏览器窗口,以查看窗口高度:

alert(window.innerHeight); // inner window height

还有更多窗口特定的方法和属性,我们稍后会介绍它们。

文档对象模型(DOM)

document 对象可以访问页面内容。我们可以使用它在页面上更改或创建任何内容。

例如:

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

这里我们使用了 document.body.style,但还有很多很多其他的东西。规范中描述了属性和方法。正好有两个工作组在研发:

  1. W3C — 其文档位于 https://www.w3.org/TR/dom
  2. WhatWG,发布在 https://dom.spec.whatwg.org

巧的是,这两个工作组并不总是统一意见,所以我们有两套标准。但它们非常相似,并最终融合在一起。您在给定资源上找到的文档非常相似,约有 99% 的相似度。你可能并不会注意到其中很小的差异。

我个人认为 https://dom.spec.whatwg.org 更适合使用。

在过去,根本没有任何标准 —— 每个浏览器都去实现它需要的东西。不同的浏览器对同一事物有不同的配置、方法和属性,开发人员必须为每个浏览器编写不同的代码。那是昏暗、混乱的时代。

即使现在我们有时可以遇到使用浏览器特定属性的旧代码,并且需要解决不兼容的问题。但是,在本教程中,我们将使用现代化的东西:除非迫不得已,否则不需要学习旧的东西。

后来出现了 DOM 标准,试图让每个浏览器都达成协议。第一个版本是“DOM Level 1”,然后它被 DOM Level 2 扩展,后来扩展到 DOM Level 3,现在它已经达到了 DOM Level 4. WhatWG 组的人厌倦了版本号,并将其称为“DOM”,没有号码。所以我们也会这样做。

DOM is not only for browsers

DOM 规范解释了文档的结构并提供了对其进行操作的对象。有的非浏览器设备也在使用它。

例如,下载并处理 HTML 页面的服务器端工具使用 DOM。尽管如此,他们可能只支持部分规范。

CSSOM for styling

CSS 规则和样式表的结构不像 HTML。有一个单独的规范 CSSOM 解释了如何将 CSS 表示为对象,以及如何读写它们。

当我们修改文档的样式规则时,CSSOM 与 DOM 一起使用。但实际上,很少需要 CSSOM,因为通常 CSS 规则是静态的。我们很少需要从 JavaScript 中添加/删除 CSS 规则,所以我们现在不会介绍它。

BOM(HTML 规范的一部分)

浏览器对象模型(BOM)是浏览器(主机环境)提供的附加对象,用于处理除文档之外的所有内容。

例如:

  • navigator 对象提供有关浏览器和操作系统的背景信息。navigator 有许多属性,但是最广为人知的两个属性是:navigator.userAgent —— 关于当前浏览器和navigator.platform —— 关于平台(可以帮助区分 Windows / Linux / Mac等)。
  • location 对象允许我们读取当前URL并将浏览器重定向到新的URL。

以下是我们如何使用 location 对象:

alert(location.href); // shows current URL
if (confirm("Go to wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

函数 alert/confirm/prompt 也是 BOM 的一部分:它们与文档并不直接相关,但它表示了与用户通信的纯浏览器方法。

HTML specification

BOM 是通用 HTML 规范的一部分。

https://html.spec.whatwg.org 中的 HTML 规范不仅是关于“HTML 语言”(标签,属性),还涵盖了一堆对象、方法和浏览器特定的DOM扩展。这就是“广义的HTML”。

总结

说到标准,我们有:

DOM 标准
描述文档的结构、操作和事件,参见 https://dom.spec.whatwg.org
CSSOM 标准
介绍样式表和样式规则,对它们的操作及其对文档的绑定,参见 https://www.w3.org/TR/cssom-1/.
HTML 标准
介绍 HTML 语言(例如标签)以及 BOM(浏览器对象模型)—— 各种浏览器函数:setTimeoutalertlocation等等,请参阅https://html.spec.whatwg.org。它采用了 DOM 规范并为其扩展了许多属性和方法。

现在我们开始学习 DOM,因为文档在 UI 中扮演着重要角色。

请注意上面的链接,因为有太多东西需要学习,所以在这里不可能掌握和记住所有内容。

当您想要了解某个属性或方法时,Mozilla 手册 https://developer.mozilla.org/en-US/search 是一个很好的资源,但阅读相应的规范可能会更好:它需要更复杂和更长的时间来阅读,但会使你的基本知识变得健全和完整。

教程路线图

评论

在评论之前先阅读本内容…
  • 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
  • 使用 <code> 标签插入几行代码,对于多行代码 — 可以使用 <pre>,对于超过十行的代码 — 建议使用沙箱(plnkrJSBincodepen 等)。
  • 如果你无法理解文章中的内容 — 请详细说明。