Javascript 瀏覽器環(huán)境，規(guī)格

JavaScript 語(yǔ)言最初是為 Web 瀏覽器創(chuàng)建的。此后，它已經(jīng)演變成了一種具有多種用途和平臺(tái)的語(yǔ)言。

平臺(tái)可以是一個(gè)瀏覽器，一個(gè) Web 服務(wù)器，或其他 主機(jī)（host），甚至可以是一個(gè)“智能”咖啡機(jī)，如果它能運(yùn)行 JavaScript 的話。它們每個(gè)都提供了特定于平臺(tái)的功能。JavaScript 規(guī)范將其稱為 主機(jī)環(huán)境。

主機(jī)環(huán)境提供了自己的對(duì)象和語(yǔ)言核心以外的函數(shù)。Web 瀏覽器提供了一種控制網(wǎng)頁(yè)的方法。Node.JS 提供了服務(wù)器端功能，等等。

下面是 JavaScript 在瀏覽器中運(yùn)行時(shí)的鳥(niǎo)瞰示意圖：

有一個(gè)叫做 window 的“根”對(duì)象。它有兩個(gè)角色：

1. 首先，它是 JavaScript 代碼的全局對(duì)象，如 全局對(duì)象 一章所述。
2. 其次，它代表“瀏覽器窗口”，并提供了控制它的方法。

例如，我們可以將它用作全局對(duì)象：

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

// 全局函數(shù)是全局對(duì)象的方法：
window.sayHi();

并且我們可以將它用作瀏覽器窗口，以查看窗口高度：

alert(window.innerHeight); // 內(nèi)部窗口高度

還有更多窗口特定的方法和屬性，我們稍后會(huì)介紹。

文檔對(duì)象模型（DOM）

文檔對(duì)象模型（Document Object Model），簡(jiǎn)稱 DOM，將所有頁(yè)面內(nèi)容表示為可以修改的對(duì)象。

document 對(duì)象是頁(yè)面的主要“入口點(diǎn)”。我們可以使用它來(lái)更改或創(chuàng)建頁(yè)面上的任何內(nèi)容。

例如：

// 將背景顏色修改為紅色
document.body.style.background = "red";

// 在 1 秒后將其修改回來(lái)
setTimeout(() => document.body.style.background = "", 1000);

在這里，我們使用了 document.body.style，但還有很多很多其他的東西。規(guī)范中有屬性和方法的詳細(xì)描述：DOM Living Standard。

DOM 不僅僅用于瀏覽器

DOM 規(guī)范解釋了文檔的結(jié)構(gòu)，并提供了操作文檔的對(duì)象。有的非瀏覽器設(shè)備也使用 DOM。

例如，下載 HTML 文件并對(duì)其進(jìn)行處理的服務(wù)器端腳本也可以使用 DOM。但它們可能僅支持部分規(guī)范中的內(nèi)容。

用于樣式的 CSSOM

另外也有一份針對(duì) CSS 規(guī)則和樣式表的、單獨(dú)的規(guī)范 CSS Object Model (CSSOM)，這份規(guī)范解釋了如何將 CSS 表示為對(duì)象，以及如何讀寫這些對(duì)象。

當(dāng)我們修改文檔的樣式規(guī)則時(shí)，CSSOM 與 DOM 是一起使用的。但實(shí)際上，很少需要 CSSOM，因?yàn)槲覀兒苌傩枰獜?JavaScript 中修改 CSS 規(guī)則（我們通常只是添加/移除一些 CSS 類，而不是直接修改其中的 CSS 規(guī)則），但這也是可行的。

瀏覽器對(duì)象模型（BOM）

瀏覽器對(duì)象模型（Browser Object Model），簡(jiǎn)稱 BOM，表示由瀏覽器（主機(jī)環(huán)境）提供的用于處理文檔（document）之外的所有內(nèi)容的其他對(duì)象。

例如：

• navigator 對(duì)象提供了有關(guān)瀏覽器和操作系統(tǒng)的背景信息。navigator 有許多屬性，但是最廣為人知的兩個(gè)屬性是：?navigator.userAgent? —— 關(guān)于當(dāng)前瀏覽器，?navigator.platform? —— 關(guān)于平臺(tái)（有助于區(qū)分 Windows/Linux/Mac 等）。
• location 對(duì)象允許我們讀取當(dāng)前 URL，并且可以將瀏覽器重定向到新的 URL。

這是我們可以如何使用 location 對(duì)象的方法：

alert(location.href); // 顯示當(dāng)前 URL
if (confirm("Go to Wikipedia?")) {
  location.; // 將瀏覽器重定向到另一個(gè) URL
}

函數(shù) alert/confirm/prompt 也是 BOM 的一部分：它們與文檔（document）沒(méi)有直接關(guān)系，但它代表了與用戶通信的純?yōu)g覽器方法。

規(guī)范

BOM 是通用 HTML 規(guī)范 的一部分。

是的，你沒(méi)聽(tīng)錯(cuò)。在 https://html.spec.whatwg.org 中的 HTML 規(guī)范不僅是關(guān)于“HTML 語(yǔ)言”（標(biāo)簽，特性）的，還涵蓋了一堆對(duì)象、方法和瀏覽器特定的 DOM 擴(kuò)展。這就是“廣義的 HTML”。此外，某些部分也有其他的規(guī)范，它們被列在 https://spec.whatwg.org 中。

總結(jié)

說(shuō)到標(biāo)準(zhǔn)，我們有：

DOM 規(guī)范

描述文檔的結(jié)構(gòu)、操作和事件，詳見(jiàn) https://dom.spec.whatwg.org。

CSSOM 規(guī)范

描述樣式表和樣式規(guī)則，對(duì)它們進(jìn)行的操作，以及它們與文檔的綁定，詳見(jiàn) https://www.w3.org/TR/cssom-1/。

HTML 規(guī)范

描述 HTML 語(yǔ)言（例如標(biāo)簽）以及 BOM（瀏覽器對(duì)象模型）— 各種瀏覽器函數(shù)：?setTimeout?，?alert?，?location? 等，詳見(jiàn) https://html.spec.whatwg.org。它采用了 DOM 規(guī)范，并使用了許多其他屬性和方法對(duì)其進(jìn)行了擴(kuò)展。

此外，某些類被分別描述在 https://spec.whatwg.org/。

請(qǐng)注意這些鏈接，因?yàn)橐獙W(xué)的東西太多了，所以不可能涵蓋并記住所有內(nèi)容。

當(dāng)你想要了解某個(gè)屬性或方法時(shí)，Mozilla 手冊(cè) https://developer.mozilla.org/en-US/ 是一個(gè)很好的資源，但對(duì)應(yīng)的規(guī)范可能會(huì)更好：它更復(fù)雜，且閱讀起來(lái)需要更長(zhǎng)的時(shí)間，但是會(huì)使你的基本知識(shí)更加全面，更加完整。

要查找某些內(nèi)容時(shí)，你通?？梢允褂没ヂ?lián)網(wǎng)搜索 “WHATWG [term]” 或 “MDN [term]”，例如 https://google.com?q=whatwg+localstorage，https://google.com?q=mdn+localstorage。

現(xiàn)在，我們開(kāi)始學(xué)習(xí) DOM，因?yàn)槲臋n在 UI 中扮演著核心角色。