摘要：當(dāng)這些系統(tǒng)的用戶界面元素產(chǎn)生某些事件時，會運(yùn)行特定的代碼以作響應(yīng)。我們將注意力放在程序設(shè)計上，特別是放在事件驅(qū)動的程序設(shè)計上，所以重點還在。

因為許多事件都與人們可以看到的用戶界面元素（按鈕、文本字段、滑動塊）相關(guān)聯(lián)，所以事件驅(qū)動計算的一個關(guān)鍵要素就是用于定義用戶界面元素的機(jī)制

由于檢測到的事件經(jīng)常會引用或修改一個腳本內(nèi)的其他用戶界面元素，所以應(yīng)當(dāng)提供一種一編程方式訪問用戶界面元素的機(jī)制。

因為用戶界面元素要響應(yīng)事件——包括但不限于單擊鼠標(biāo)、鼠標(biāo)移動、擊鍵、語音與手勢檢測、鍵盤焦點改變、時間流逝、網(wǎng)絡(luò)數(shù)據(jù)到達(dá)，所以事件驅(qū)動的系統(tǒng)提供一種用于指定代碼的機(jī)制，再出發(fā)特定事件時執(zhí)行此代碼。

許多事件都伴有補(bǔ)充信息。例如鼠標(biāo)事件涉及鼠標(biāo)坐標(biāo)、一個或多個鼠標(biāo)按鈕；鍵盤事件涉及一個特定鍵，還可能有一個或多個修改鍵。因此事件驅(qū)動的系統(tǒng)提供一種用于讀取事件專屬信息的機(jī)制。

之前曾提到，JavaScript的設(shè)計就是要內(nèi)嵌在托管系統(tǒng)中，比如Web服務(wù)器、圖像編輯器、字處理器和類似系統(tǒng)。當(dāng)這些系統(tǒng)的用戶界面元素產(chǎn)生某些事件時，會運(yùn)行特定的JavaScript代碼以作響應(yīng)。盡管JavaScript并沒有自己定義這些元素，但它卻提供了一種非常好的功能，可以將函數(shù)用作對象的屬性，與這些用戶界面元素完全對應(yīng)。

例如，在一個Web環(huán)境中，這些元素是通過以HTML編寫的結(jié)構(gòu)化文檔來提供的，這些文檔或者由Web服務(wù)器通過互聯(lián)網(wǎng)提供，或者作為.html文件存儲在本地計算機(jī)上，然后由Web渲染器為我們熟悉的可視形式。沒有JavaScript，這些頁面就是靜態(tài)的，也就是說，一旦加載，它們的內(nèi)容就不能改變。改變顯示內(nèi)容的唯一方法就是單擊一個鏈接，為一個新頁面重新啟動"鏈接——渲染"周期。利用JavaScript，web頁面獲得了觸發(fā)自我修改的能力，從而可以根據(jù)用戶與頁面內(nèi)容的互動變?yōu)閯討B(tài)的。

    
        
        
         
    
        
Temperature Conversion
        

            
            
            
        
        
        

        
    

如上面這段"溫度轉(zhuǎn)換器"的Web頁面的節(jié)點結(jié)構(gòu)。

HTML定義了一組可供使用的節(jié)點和屬性，還有用于構(gòu)建正確結(jié)構(gòu)的規(guī)則。創(chuàng)建HTML文檔的通常形式是：編寫一系列用標(biāo)簽表示元素的字符，這些標(biāo)簽或者為開始標(biāo)簽、結(jié)束標(biāo)簽或者為空標(biāo)簽。
定義HTML語法的全套規(guī)則非常復(fù)雜，但我們可以由以下規(guī)則入門。

文檔的開頭應(yīng)當(dāng)是一個文檔類型聲明，告訴瀏覽器希望使用哪種HTML版本，目前一般都是HTML5.

Web頁面應(yīng)當(dāng)僅包含一個html元素，它恰好由兩部分組成，其順序為：head元素后面跟有一個body元素。

頭元素中包含文檔的相關(guān)信息，其中有一些子元素，用于表示頁面標(biāo)題（title）、到其他web資源的鏈接（link）、樣式信息（style）、腳本（script）、一般信息（meta）及其他。強(qiáng)烈建議提供一個meta元素，作為head的第一個子元素，告訴瀏覽器，你的文檔存儲時采用了哪種字符編碼。

主體中包含文本元素和塊元素。文本可以用行內(nèi)元素標(biāo)記，這些元素可用于以下目的：表示強(qiáng)調(diào)（em）、著重強(qiáng)調(diào)（strong）、匿名（abbrev）、引用（q）、引文（cite）、上標(biāo)（sup）、下標(biāo)（sub）、到其他文檔的鏈接（a）、一般內(nèi)置跨區(qū)（span）等等。

有幾個用于表示多媒體內(nèi)容的元素，其行為方式也與行內(nèi)元素相同：img、audio、video、object、embed。audio和video是HTML5新增元素；object和embed用于瀏覽器插件的百寶囊元素。

一些元素設(shè)計上需要子組件：有序、無序列表li；定義列表dt和dd；表格表頭thead、主體tbody、頁腳tfoot、每一個都有行tr，單元格可以是標(biāo)題th,也可以是正常表格數(shù)據(jù)td。

經(jīng)典的用戶界面元素：input（button、text）、select、textarea、單選radio、復(fù)選checkbox等等。
HTML5引入了outpt、keygen、progress、meter、command，還有其他一些input類型，如number、date、email。

一些元素既可以出現(xiàn)在標(biāo)題中，也可以出現(xiàn)在主體中，一些元素既可以充當(dāng)塊元素，也可以充當(dāng)行內(nèi)元素。

我們將注意力放在程序設(shè)計上，特別是放在事件驅(qū)動的程序設(shè)計上，所以重點還在JavaScript。

下面將說明JavaScript如何使用一種稱為文檔對象模型（Document Object Model,DOM）的“橋接技術(shù)”來讀寫這一用戶界面，并進(jìn)行處理。

document就是一種宿主對象，可以在任何時間、任何位置供Web瀏覽器中運(yùn)行的任何JavaScript代碼使用。

        alert(document)

至少，它向你證明了：JavaScript不用費(fèi)什么力氣就能看到document，只需用名字調(diào)用它即可。現(xiàn)在再簡單看看document的一些屬性。

        var i = 0;
        for (var prototy in document) {
            console.log(prototy);
            i++;
            if (i>4) {
                break;
            }
        };

[Web瀏覽器] "vlinkColor" /javascript/test.html (11)
[Web瀏覽器] "linkColor" /javascript/test.html (11)
[Web瀏覽器] "alinkColor" /javascript/test.html (11)
[Web瀏覽器] "fgColor" /javascript/test.html (11)
[Web瀏覽器] "bgColor" /javascript/test.html (11)
看到了控制臺內(nèi)的輸出，每個都有一個屬性名，比如bgColor、width或getElementById。這里無法給出一個確定不變的列表，因為不同瀏覽器可能會按不同的順序列出document的屬性，甚至包含一些其他瀏覽器不被支持的屬性。
i計數(shù)器將console.log的屬性名稱限制為僅有五個，有一種更方便的方式查看document的所有屬性名稱。

        for (var property in document) {
            document.write("
"+property+"
");
        }

注意上面代碼如何改變了web窗口中的實際內(nèi)容。這是document的關(guān)鍵屬性之一，它被直接“連線”到一個web頁面。document中的write函數(shù)將給定字符串直接發(fā)送個頁面；我們用這個函數(shù)逐字寫出其內(nèi)容。如果在處理頁面的同時調(diào)用write，它的行為更像是一個打字員，向當(dāng)前頁面注入HTML，但是如果在加載頁面之后在調(diào)用write，將會創(chuàng)建一個新的空白web頁面，并向其添加文本。
不難想象一個函數(shù)可以怎樣修改web瀏覽器的內(nèi)容。畢竟是一個函數(shù)，可以輕松的包含代碼，用于修改顯示內(nèi)容。

        var footer = document.getElementById("footer");
        footer.innerHTML = "
document properties:
";
        var properties = [];
        for (var property in document) {
            properties.push(property+" ");
        }
        footer.innerHTML = "
"+properties.join("
")+"
"

這個腳本中，document.getElementById("footer")返回運(yùn)行期頁面的一些元素，但這并不是什么非同尋常的事情。注意，其中只有一次賦值操作，就是為這個對象的innerHTML屬性指定了一個字符串，而這一賦值操作改變了web頁面，其效果馬上就顯示了出來。這樣就使JavaScript與相關(guān)文檔之間的互動顯得非常自然，富有凝聚力:設(shè)定一個值，馬上就能看到結(jié)果。

對document宿主對象再做一點深入剖析。我們已經(jīng)看到，document是JavaScript代碼借以修改或更新Web頁面的渠道。這個宿主對象表示的就是文檔樹頂部的文檔節(jié)點，事實上，這些樹中的所有節(jié)點都是用JavaScript宿主對象表示的；和所有對象一樣，它們擁有屬性。DOM對象，包括document自身，具有以下一個或多個屬性。

nodeType：1~12范圍內(nèi)的一個整數(shù)，用來描述節(jié)點的類型。例如：1表示元素，3表示文本，8表示注釋，9表示文檔節(jié)點本身

nodeValue：節(jié)點的內(nèi)容，如文本節(jié)點中的文本。

childNodes：一個與數(shù)組類似的對象，其中childNodes[0]引用了該對象的第一個子節(jié)點，childNodes[1]引用第二個，以此類推。每個子節(jié)點又可以擁有自己的childNodes屬性。

tagName：元素的名字

attributes：一個類似于數(shù)組的對象，其中包含"名稱-值對"形式的屬性。