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

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

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

因?yàn)橛脩艚缑嬖匾憫?yīng)事件——包括但不限于單擊鼠標(biāo)、鼠標(biāo)移動(dòng)、擊鍵、語(yǔ)音與手勢(shì)檢測(cè)、鍵盤焦點(diǎn)改變、時(shí)間流逝、網(wǎng)絡(luò)數(shù)據(jù)到達(dá)，所以事件驅(qū)動(dòng)的系統(tǒng)提供一種用于指定代碼的機(jī)制，再出發(fā)特定事件時(shí)執(zhí)行此代碼。

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

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

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

    
        
        
         
    
        
Temperature Conversion
        

            
            
            
        
        
        

        
    

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

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

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

Web頁(yè)面應(yīng)當(dāng)僅包含一個(gè)html元素，它恰好由兩部分組成，其順序?yàn)椋篽ead元素后面跟有一個(gè)body元素。

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

主體中包含文本元素和塊元素。文本可以用行內(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）等等。

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

一些元素設(shè)計(jì)上需要子組件：有序、無(wú)序列表li；定義列表dt和dd；表格表頭thead、主體tbody、頁(yè)腳tfoot、每一個(gè)都有行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è)計(jì)上，特別是放在事件驅(qū)動(dòng)的程序設(shè)計(jì)上，所以重點(diǎn)還在JavaScript。

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

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

        alert(document)

至少，它向你證明了：JavaScript不用費(fèi)什么力氣就能看到document，只需用名字調(diào)用它即可?，F(xiàn)在再簡(jiǎ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)
看到了控制臺(tái)內(nèi)的輸出，每個(gè)都有一個(gè)屬性名，比如bgColor、width或getElementById。這里無(wú)法給出一個(gè)確定不變的列表，因?yàn)椴煌瑸g覽器可能會(huì)按不同的順序列出document的屬性，甚至包含一些其他瀏覽器不被支持的屬性。
i計(jì)數(shù)器將console.log的屬性名稱限制為僅有五個(gè)，有一種更方便的方式查看document的所有屬性名稱。

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

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

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

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

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

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

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

tagName：元素的名字

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