浏览器环境、规范

最初，JavaScript 语言是为网络浏览器创建的。从那时起，它已演变为一种具有多种用途和平台的语言。

平台可以是浏览器、网络服务器或其他主机，甚至可以是“智能”咖啡机（如果它可以运行 JavaScript）。其中每一个都提供特定于平台的功能。JavaScript 规范称之为主机环境。

除了语言核心之外，主机环境还提供自己的对象和函数。网络浏览器提供控制网页的方法。Node.js 提供服务器端功能，依此类推。

以下是 JavaScript 在网络浏览器中运行时的概览

有一个名为 window 的“根”对象。它有两个作用

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

例如，我们可以将它用作全局对象

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

// global functions are methods of the global object:
window.sayHi();

我们可以将它用作浏览器窗口，以显示窗口高度

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

还有更多特定于窗口的方法和属性，我们将在后面介绍。

DOM（文档对象模型）

文档对象模型，简称 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，但还有更多。属性和方法在规范中进行了描述：DOM Living Standard。

BOM（浏览器对象模型）

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

例如

• 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 的一部分：它们与文档没有直接关系，而是代表与用户通信的纯浏览器方法。

总结

谈到标准，我们有

DOM 规范

描述文档结构、操作和事件，请参阅 https://dom.spec.whatwg.org。

CSSOM 规范

描述样式表和样式规则、对其进行操作以及它们与文档的绑定，请参阅 https://www.w3.org/TR/cssom-1/。

HTML 规范

描述 HTML 语言（例如，标签）以及 BOM（浏览器对象模型）——各种浏览器函数：setTimeout、alert、location 等，请参阅 https://html.whatwg.com.cn。它采用 DOM 规范，并用许多其他属性和方法对其进行扩展。

此外，某些类在 https://spec.whatwg.org/ 中单独描述。

请注意这些链接，因为有太多内容需要学习，不可能涵盖所有内容并记住所有内容。

当你想了解某个属性或方法时，位于 https://mdn.org.cn/en-US/ 的 Mozilla 手册也是一个不错的资源，但相应的规范可能更好：它更复杂、阅读起来更费时，但会让你的基础知识变得扎实而完整。

为了找到某些内容，通常可以方便地使用互联网搜索“WHATWG [术语]”或“MDN [术语]”，例如 https://google.com?q=whatwg+localstorage、https://google.com?q=mdn+localstorage。

现在，我们将开始学习 DOM，因为文档在 UI 中扮演着核心角色。