DOM文檔對(duì)象模型

1、DHTML及客戶端腳本及客戶端腳本 教師：黃強(qiáng)E_mail：Tel述概述 開發(fā)網(wǎng)站不是僅僅去設(shè)計(jì)、制作網(wǎng)頁(yè)，如開發(fā)網(wǎng)站不是僅僅去設(shè)計(jì)、制作網(wǎng)頁(yè)，如果只是制作網(wǎng)頁(yè)的話，我們完全可以使用所見果只是制作網(wǎng)頁(yè)的話，我們完全可以使用所見即所得的網(wǎng)頁(yè)制作軟件，如：即所得的網(wǎng)頁(yè)制作軟件，如：FrontPageFrontPage、DreamweaverDreamweaver等，而不用掌握超文本標(biāo)識(shí)語(yǔ)言、等，而不用掌握超文本標(biāo)識(shí)語(yǔ)言、腳本語(yǔ)言之類的編程工具。雖說(shuō)腳本語(yǔ)言之類的編程工具。雖說(shuō)FrontPageFrontPage、DreamweaverDreamweaver等均有網(wǎng)站開發(fā)功

2、能，但與語(yǔ)言相等均有網(wǎng)站開發(fā)功能，但與語(yǔ)言相比其靈活性就差多了，另外它們生成的程序源比其靈活性就差多了，另外它們生成的程序源代碼要復(fù)雜、冗長(zhǎng)的多。超文本標(biāo)識(shí)語(yǔ)言、腳代碼要復(fù)雜、冗長(zhǎng)的多。超文本標(biāo)識(shí)語(yǔ)言、腳本語(yǔ)言是網(wǎng)頁(yè)的基礎(chǔ)，是網(wǎng)站生長(zhǎng)的本語(yǔ)言是網(wǎng)頁(yè)的基礎(chǔ)，是網(wǎng)站生長(zhǎng)的“土壤土壤”，加上層疊樣式表以及可擴(kuò)展標(biāo)識(shí)語(yǔ)言等，可以加上層疊樣式表以及可擴(kuò)展標(biāo)識(shí)語(yǔ)言等，可以使我們開發(fā)出的網(wǎng)站形式更豐富、內(nèi)容更精彩。使我們開發(fā)出的網(wǎng)站形式更豐富、內(nèi)容更精彩。初識(shí)超文本標(biāo)識(shí)初識(shí)超文本標(biāo)識(shí)HTMLHTML超文本標(biāo)識(shí)語(yǔ)言超文本標(biāo)識(shí)語(yǔ)言(Hyper Text Markup Language(Hyper Text Ma

3、rkup Language，HTML)HTML)結(jié)構(gòu)簡(jiǎn)單，語(yǔ)法較松散，易學(xué)易用。它是一種文字處理結(jié)構(gòu)簡(jiǎn)單，語(yǔ)法較松散，易學(xué)易用。它是一種文字處理語(yǔ)言，而不是語(yǔ)言，而不是“程序程序”語(yǔ)言。語(yǔ)言。HTMLHTML的標(biāo)識(shí)嵌于文本格式的標(biāo)識(shí)嵌于文本格式的文檔中，用來(lái)控制文字、圖片等在瀏覽器中的表現(xiàn)，的文檔中，用來(lái)控制文字、圖片等在瀏覽器中的表現(xiàn)，以及如何建立文件之間的鏈接。程序與之最大的不同，以及如何建立文件之間的鏈接。程序與之最大的不同，就是可用來(lái)控制操作系統(tǒng)或應(yīng)用程序執(zhí)行、并完成某項(xiàng)就是可用來(lái)控制操作系統(tǒng)或應(yīng)用程序執(zhí)行、并完成某項(xiàng)作業(yè)。使用超文本標(biāo)識(shí)語(yǔ)言作業(yè)。使用超文本標(biāo)識(shí)語(yǔ)言“處理處理”過(guò)的文檔

4、應(yīng)該滿足，過(guò)的文檔應(yīng)該滿足，不管在任何操作系統(tǒng)，任何瀏覽器上讀起來(lái)或看上去都不管在任何操作系統(tǒng)，任何瀏覽器上讀起來(lái)或看上去都是一樣的。是一樣的。超文本標(biāo)識(shí)語(yǔ)言最初用于發(fā)布信息，并沒有在網(wǎng)絡(luò)上使超文本標(biāo)識(shí)語(yǔ)言最初用于發(fā)布信息，并沒有在網(wǎng)絡(luò)上使用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐漸增加，人們便將其作為網(wǎng)絡(luò)上發(fā)布信息的首選語(yǔ)言。漸增加，人們便將其作為網(wǎng)絡(luò)上發(fā)布信息的首選語(yǔ)言。 例例 用超文本標(biāo)識(shí)語(yǔ)言書寫一段實(shí)用程序用超文本標(biāo)識(shí)語(yǔ)言書寫一段實(shí)用程序(L4-(L4-1.htm)1.htm)。超文本標(biāo)識(shí)語(yǔ)言源程序超文本標(biāo)識(shí)語(yǔ)言源程序 物理學(xué)家霍金

5、名言物理學(xué)家霍金名言 我的手指還能活動(dòng)，我的大腦還能思維；我的手指還能活動(dòng)，我的大腦還能思維； 我有終生追求的理想，有我愛和愛我的親人和朋友；我有終生追求的理想，有我愛和愛我的親人和朋友； 對(duì)了，我還有一顆感恩的心對(duì)了，我還有一顆感恩的心 我的手指還能活我的手指還能活動(dòng)，我的大腦還能思維；動(dòng)，我的大腦還能思維； 我有我有終生追求的理想，有我愛和愛我的親人和朋友；終生追求的理想，有我愛和愛我的親人和朋友； 對(duì)了，我對(duì)了，我還有一顆感恩的心還有一顆感恩的心運(yùn)行結(jié)果：運(yùn)行結(jié)果：一般將一般將HTMLHTML語(yǔ)言的文件分為三個(gè)部分，它們是：語(yǔ)言的文件分為三個(gè)部分，它們是： l l 序序(Prologue

6、)(Prologue) l l頭部頭部(Head)(Head) l l文件主體文件主體(Body)(Body) HTML HTML語(yǔ)言文件的主要部分是頭部和文件主語(yǔ)言文件的主要部分是頭部和文件主體。除了頭標(biāo)識(shí)和主體標(biāo)識(shí)外，就是附加標(biāo)體。除了頭標(biāo)識(shí)和主體標(biāo)識(shí)外，就是附加標(biāo)識(shí)識(shí)序序(HTML(HTML的版本聲明的版本聲明) )，這種標(biāo)識(shí)放在，這種標(biāo)識(shí)放在HTMLHTML文檔的第一行，而一般的文檔中也許沒有。文檔的第一行，而一般的文檔中也許沒有。序是用來(lái)告知瀏覽器所遵循的序是用來(lái)告知瀏覽器所遵循的HTMLHTML版本。版本。HTMLHTML語(yǔ)言的基本結(jié)構(gòu)如下：語(yǔ)言的基本結(jié)構(gòu)如下： ! ! HTML

7、! HTML ! HTML HTMLHTML的基本結(jié)構(gòu)樣板的基本結(jié)構(gòu)樣板 ! ! ! HTMLHTML文檔的基本結(jié)構(gòu)樣板，文檔的基本結(jié)構(gòu)樣板，HTMLHTML的正文應(yīng)從這里開始。的正文應(yīng)從這里開始。 ! ! HTML 說(shuō)明：說(shuō)明： HEADHEAD標(biāo)識(shí)內(nèi)的信息一般不在瀏覽器的主窗口中顯示。標(biāo)識(shí)內(nèi)的信息一般不在瀏覽器的主窗口中顯示。 需要表示的內(nèi)容和描述內(nèi)容的標(biāo)識(shí)格式等，一般放需要表示的內(nèi)容和描述內(nèi)容的標(biāo)識(shí)格式等，一般放在在BODYBODY標(biāo)識(shí)內(nèi)。標(biāo)識(shí)內(nèi)。 注釋有兩種方法：注釋有兩種方法： ! ，“注釋內(nèi)容注釋內(nèi)容”中不可出現(xiàn)右尖括中不可出現(xiàn)右尖括號(hào)，一般用于標(biāo)識(shí)里的內(nèi)容號(hào)，一般用于標(biāo)識(shí)里的內(nèi)容

8、 !- -，“注釋內(nèi)容注釋內(nèi)容”中可以出現(xiàn)包中可以出現(xiàn)包括尖括號(hào)在內(nèi)的任何括號(hào)，一般用于注釋大段的內(nèi)容。括尖括號(hào)在內(nèi)的任何括號(hào)，一般用于注釋大段的內(nèi)容。注意，本注釋僅用于注釋超文本標(biāo)識(shí)語(yǔ)言。注意，本注釋僅用于注釋超文本標(biāo)識(shí)語(yǔ)言。 可以使用所有編輯純文本文件的軟件，或帶有可以使用所有編輯純文本文件的軟件，或帶有HTMLHTML編輯器的軟件來(lái)編輯編輯器的軟件來(lái)編輯HTMLHTML，擴(kuò)展名必須寫為，擴(kuò)展名必須寫為.html.html或或.htm.htm。如：記事本、寫字板、。如：記事本、寫字板、WordWord、FrontPageFrontPage、HotdogHotdog、DreamweaverD

9、reamweaver等。等。 “基本結(jié)構(gòu)樣板基本結(jié)構(gòu)樣板”在瀏覽器中顯示如圖在瀏覽器中顯示如圖4.24.2。基本語(yǔ)法基本語(yǔ)法 超文本標(biāo)識(shí)語(yǔ)言超文本標(biāo)識(shí)語(yǔ)言HTMLHTML是標(biāo)識(shí)的集合，是標(biāo)識(shí)的集合，是標(biāo)準(zhǔn)通用標(biāo)識(shí)語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)識(shí)語(yǔ)言SGMLSGML的一個(gè)子集。被的一個(gè)子集。被一對(duì)尖括號(hào)一對(duì)尖括號(hào)“”括起來(lái)，標(biāo)識(shí)一括起來(lái)，標(biāo)識(shí)一般成對(duì)出現(xiàn)。如般成對(duì)出現(xiàn)。如“基本結(jié)構(gòu)樣板基本結(jié)構(gòu)樣板”中的中的和和，為起始標(biāo)識(shí)，為起始標(biāo)識(shí)，加斜線的加斜線的即即，為結(jié)束標(biāo)識(shí)。，為結(jié)束標(biāo)識(shí)。 標(biāo)識(shí)標(biāo)識(shí)(Tags)(Tags)和屬性和屬性(Attributes)(Attributes)構(gòu)建構(gòu)建了了HTMLHTML的語(yǔ)法

10、。瀏覽器只要讀到的語(yǔ)法。瀏覽器只要讀到HTMLHTML的標(biāo)的標(biāo)識(shí)和屬性，就會(huì)將其解釋成網(wǎng)頁(yè)或網(wǎng)頁(yè)的識(shí)和屬性，就會(huì)將其解釋成網(wǎng)頁(yè)或網(wǎng)頁(yè)的某個(gè)組成部分，它們的基本構(gòu)成如下：某個(gè)組成部分，它們的基本構(gòu)成如下： 標(biāo)識(shí)標(biāo)識(shí)：標(biāo)識(shí)就是給文檔中某些具有特殊含義的部分作標(biāo)識(shí)就是給文檔中某些具有特殊含義的部分作標(biāo)記的過(guò)程，標(biāo)識(shí)的符號(hào)標(biāo)記的過(guò)程，標(biāo)識(shí)的符號(hào)( (如：如：、等等，等等，常簡(jiǎn)稱標(biāo)識(shí)或標(biāo)記常簡(jiǎn)稱標(biāo)識(shí)或標(biāo)記) )是該過(guò)程的具體實(shí)現(xiàn)。是該過(guò)程的具體實(shí)現(xiàn)。屬性：屬性是存儲(chǔ)屬性值的變量。屬性：屬性是存儲(chǔ)屬性值的變量。例句：例句：值：屬性通常含有一個(gè)值值：屬性通常含有一個(gè)值(Value)(Value)，該值應(yīng)在規(guī)

11、定的范，該值應(yīng)在規(guī)定的范圍內(nèi)選取。圍內(nèi)選取。嵌套標(biāo)識(shí)嵌套標(biāo)識(shí)：在不同的網(wǎng)頁(yè)版式設(shè)計(jì)中，在不同的網(wǎng)頁(yè)版式設(shè)計(jì)中，可以使可以使用一個(gè)用一個(gè)以上的標(biāo)識(shí)來(lái)表示頁(yè)面的數(shù)據(jù)，例如：設(shè)置一個(gè)文本字以上的標(biāo)識(shí)來(lái)表示頁(yè)面的數(shù)據(jù)，例如：設(shè)置一個(gè)文本字串為：標(biāo)題串為：標(biāo)題1 1、斜體，可以使用標(biāo)識(shí)、斜體，可以使用標(biāo)識(shí)和和，例句如，例句如下：下： 岳陽(yáng)樓記岳陽(yáng)樓記 注意標(biāo)識(shí)嵌套時(shí)的順序不應(yīng)交叉，下句則不對(duì)：注意標(biāo)識(shí)嵌套時(shí)的順序不應(yīng)交叉，下句則不對(duì)： 岳陽(yáng)樓記岳陽(yáng)樓記 從語(yǔ)法上來(lái)說(shuō)該句是不對(duì)的，但從語(yǔ)法上來(lái)說(shuō)該句是不對(duì)的，但I(xiàn)EIE和和NetscapeNetscape瀏覽瀏覽器仍能正確識(shí)別和顯示，即瀏覽器一般總能最大限

12、度地器仍能正確識(shí)別和顯示，即瀏覽器一般總能最大限度地容忍錯(cuò)誤。不提倡使用嵌套標(biāo)識(shí)。容忍錯(cuò)誤。不提倡使用嵌套標(biāo)識(shí)。 空格符：空格符：HTMLHTML標(biāo)識(shí)間多余的空格符或回車符瀏覽器是標(biāo)識(shí)間多余的空格符或回車符瀏覽器是不理會(huì)的。不理會(huì)的。 特殊字符：在特殊字符：在HTMLHTML語(yǔ)言中定義了一些用戶不能直接從語(yǔ)言中定義了一些用戶不能直接從鍵盤輸入的特殊字符，如：字符（鍵盤輸入的特殊字符，如：字符（& &）、雙引號(hào)）、雙引號(hào)(“ ”) (“ ”) 、小于、小于()()()、空格符等，它們不能直、空格符等，它們不能直接用于接用于HTMLHTML文檔在瀏覽器中顯示。文檔在瀏覽器中顯示。 常用標(biāo)識(shí)常用標(biāo)識(shí)

13、1. 1. 基本標(biāo)識(shí)基本標(biāo)識(shí)(Basic Tags)(Basic Tags) 定義超文本文檔，描述定義超文本文檔，描述WebWeb頁(yè)面的起始與終止；頁(yè)面的起始與終止； 設(shè)置頁(yè)面的頭標(biāo)部分，用來(lái)包含當(dāng)前文檔的一設(shè)置頁(yè)面的頭標(biāo)部分，用來(lái)包含當(dāng)前文檔的一些相關(guān)信息。如定義樣式、網(wǎng)頁(yè)的標(biāo)題、網(wǎng)頁(yè)中使用的腳本語(yǔ)言以些相關(guān)信息。如定義樣式、網(wǎng)頁(yè)的標(biāo)題、網(wǎng)頁(yè)中使用的腳本語(yǔ)言以及對(duì)搜索引擎有幫助的關(guān)鍵詞；及對(duì)搜索引擎有幫助的關(guān)鍵詞； HTML HTML文檔均應(yīng)該包含文檔均應(yīng)該包含標(biāo)識(shí)，用來(lái)指標(biāo)識(shí)，用來(lái)指明文件的標(biāo)題。其內(nèi)容將顯示在瀏覽器的標(biāo)題欄內(nèi)，設(shè)置它的最大明文件的標(biāo)題。其內(nèi)容將顯示在瀏覽器的標(biāo)題欄內(nèi)，設(shè)置

14、它的最大好處，是為搜索引擎提供搜索關(guān)鍵詞；好處，是為搜索引擎提供搜索關(guān)鍵詞； 放置放置WebWeb頁(yè)面的正文內(nèi)容，包含文件內(nèi)的文字、頁(yè)面的正文內(nèi)容，包含文件內(nèi)的文字、超級(jí)鏈接文字的顏色、背景色彩、圖片、動(dòng)畫、影像、音效等，幾超級(jí)鏈接文字的顏色、背景色彩、圖片、動(dòng)畫、影像、音效等，幾乎所有對(duì)網(wǎng)頁(yè)的展示功能；乎所有對(duì)網(wǎng)頁(yè)的展示功能； 用來(lái)介紹與文件內(nèi)容相關(guān)的信息。每一個(gè)用來(lái)介紹與文件內(nèi)容相關(guān)的信息。每一個(gè)標(biāo)識(shí)標(biāo)識(shí)用于指明一個(gè)名稱或數(shù)值對(duì)，常常放在頭標(biāo)識(shí)中；用于指明一個(gè)名稱或數(shù)值對(duì)，常常放在頭標(biāo)識(shí)中； 設(shè)置連接的基準(zhǔn)路徑，該標(biāo)識(shí)可以大大設(shè)置連接的基準(zhǔn)路徑，該標(biāo)識(shí)可以大大簡(jiǎn)化網(wǎng)頁(yè)內(nèi)超鏈接的全路徑，這里

15、只要給出相對(duì)于簡(jiǎn)化網(wǎng)頁(yè)內(nèi)超鏈接的全路徑，這里只要給出相對(duì)于BaseBase原指定的基原指定的基準(zhǔn)地址的相對(duì)路徑即可。準(zhǔn)地址的相對(duì)路徑即可。為單標(biāo)識(shí)，通常放在為單標(biāo)識(shí)，通常放在區(qū)內(nèi)。區(qū)內(nèi)。2. 2. 文本、字符格式文本、字符格式(Text & Char Format)(Text & Char Format) 標(biāo)題文字標(biāo)題文字(n=1(n=16)6)； 換行標(biāo)識(shí)，單標(biāo)識(shí)換行標(biāo)識(shí)，單標(biāo)識(shí)； 定義段落（分段），常用雙標(biāo)識(shí)，定義段落（分段），常用雙標(biāo)識(shí)，也可用單個(gè)標(biāo)識(shí)也可用單個(gè)標(biāo)識(shí)； 在在之間的內(nèi)容將之間的內(nèi)容將以預(yù)格式化的文本方式顯示，包括回車換行以以預(yù)格式化的文本方式顯示，包括回車換行以及跳格等及跳

16、格等； 可以作為文本與文本之間的分界標(biāo)識(shí)，可以作為文本與文本之間的分界標(biāo)識(shí)，通常是一個(gè)全寬的水平線通常是一個(gè)全寬的水平線； 字符格式字符格式； 字體字體。3. 3. 列表標(biāo)識(shí)列表標(biāo)識(shí)(Lists)(Lists) 定義列表定義列表(Definition List)(Definition List)； 設(shè)定定義列表的標(biāo)識(shí)設(shè)定定義列表的標(biāo)識(shí) 設(shè)定定義列表的項(xiàng)目設(shè)定定義列表的項(xiàng)目 設(shè)定定義列表的項(xiàng)目說(shuō)明設(shè)定定義列表的項(xiàng)目說(shuō)明 設(shè)定緊密排列的定義列表設(shè)定緊密排列的定義列表 無(wú)序號(hào)列表無(wú)序號(hào)列表(Unordered List)(Unordered List)； 步驟一步驟一步驟二步驟二下一階段下一階段步驟

17、三步驟三 有序號(hào)列表有序號(hào)列表(Ordered List)(Ordered List)。 過(guò)程一過(guò)程一過(guò)程二過(guò)程二子過(guò)程子過(guò)程A A子過(guò)程子過(guò)程B B過(guò)程三過(guò)程三 DHTML的概念動(dòng)態(tài)HTML就是一種即使在網(wǎng)頁(yè)下載進(jìn)瀏覽器以后，網(wǎng)頁(yè)中元素的位置、外觀、內(nèi)容仍然能夠隨時(shí)變換，這樣的HTML，我們稱之為DHTML 。動(dòng)態(tài)HTML（簡(jiǎn)稱為DHTML）是近年來(lái)網(wǎng)絡(luò)發(fā)展進(jìn)程中最振奮人心也最具實(shí)用性的創(chuàng)新之一。它的實(shí)現(xiàn)需要幾種技術(shù)的綜合。（當(dāng)然，不同的瀏覽器，實(shí)現(xiàn)的程度也不同），這些技術(shù)包括CSS, DOM (Document Object Mode)，改變網(wǎng)頁(yè)的編程語(yǔ)言（JavaScript，VBScr

18、ipt）?；诨贖TML語(yǔ)言，利用語(yǔ)言，利用CSS擴(kuò)展樣式編擴(kuò)展樣式編排，借助瀏覽器對(duì)象模型概念，以腳本排，借助瀏覽器對(duì)象模型概念，以腳本程序?qū)W(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)控制程序?qū)W(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)控制文件對(duì)象模型文件對(duì)象模型DOM ( Document Object Model ) 其核心是將網(wǎng)頁(yè)內(nèi)容都作為對(duì)象。只要為其核心是將網(wǎng)頁(yè)內(nèi)容都作為對(duì)象。只要為HTML中的標(biāo)記設(shè)定一個(gè)標(biāo)識(shí)符中的標(biāo)記設(shè)定一個(gè)標(biāo)識(shí)符(ID)，就可，就可將所標(biāo)識(shí)的內(nèi)容作為對(duì)象在腳本程序中使用。將所標(biāo)識(shí)的內(nèi)容作為對(duì)象在腳本程序中使用。傳統(tǒng)的HTML是靜態(tài)的，當(dāng)它被加載到瀏覽器以后，無(wú)法變化DHTML-當(dāng)服務(wù)器把頁(yè)面?zhèn)魉徒o瀏覽器后，頁(yè)面還可以

19、變化DOM（文檔對(duì)象模型）： 工作原理：DHTML查閱文檔的一種方法，當(dāng)頁(yè)面被加載時(shí)，建立起數(shù)據(jù)庫(kù) 控制元素的方法：使用腳本語(yǔ)言來(lái)完成 DHTML與服務(wù)器無(wú)關(guān)DOM技術(shù)技術(shù)DOM概述概述一個(gè)跨平臺(tái)的、可適應(yīng)不同程序語(yǔ)言一個(gè)跨平臺(tái)的、可適應(yīng)不同程序語(yǔ)言的文件對(duì)象模型；的文件對(duì)象模型；它采取直觀且一致的方式，將它采取直觀且一致的方式，將HTML或或XML文檔進(jìn)行模型化處理；文檔進(jìn)行模型化處理；提供存取和更新文檔內(nèi)容、結(jié)構(gòu)和樣提供存取和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的編程接口。式的編程接口。 將文檔作為一個(gè)樹形（將文檔作為一個(gè)樹形（Tree）結(jié)構(gòu)，）結(jié)構(gòu)，樹的每個(gè)節(jié)點(diǎn)表現(xiàn)為一個(gè)樹的每個(gè)節(jié)點(diǎn)表現(xiàn)為一個(gè)HTM

20、L標(biāo)記標(biāo)記或者或者HTML標(biāo)記內(nèi)的文本項(xiàng)。標(biāo)記內(nèi)的文本項(xiàng)。 以下是一個(gè)產(chǎn)生表格的以下是一個(gè)產(chǎn)生表格的HTML文件。文件。 商品類別商品類別 數(shù)量數(shù)量 日用百貨日用百貨 10 電器電器 20 文檔與DOM關(guān)系示例HTMLHTML文件的文件的DOMDOM節(jié)點(diǎn)樹節(jié)點(diǎn)樹 商品商品類別類別數(shù)量數(shù)量日用日用百貨百貨10電器電器20DOMDOM樹型結(jié)構(gòu)節(jié)點(diǎn)的屬性樹型結(jié)構(gòu)節(jié)點(diǎn)的屬性 屬性屬性訪問(wèn)訪問(wèn)說(shuō)說(shuō) 明明nodeName只讀只讀返回節(jié)點(diǎn)的標(biāo)記名。返回節(jié)點(diǎn)的標(biāo)記名。nodeType只讀只讀返回節(jié)點(diǎn)的類型：返回節(jié)點(diǎn)的類型：1標(biāo)記，標(biāo)記，2屬屬性，性，3文字節(jié)點(diǎn)。文字節(jié)點(diǎn)。firstChild只讀只讀返回第一個(gè)

21、子節(jié)點(diǎn)的對(duì)象集合。返回第一個(gè)子節(jié)點(diǎn)的對(duì)象集合。lastChild只讀只讀返回最后一個(gè)子節(jié)點(diǎn)的對(duì)象集合。返回最后一個(gè)子節(jié)點(diǎn)的對(duì)象集合。parentNode只讀只讀返回父節(jié)點(diǎn)對(duì)象。返回父節(jié)點(diǎn)對(duì)象。previousSibling只讀只讀返回左兄弟節(jié)點(diǎn)對(duì)象。返回左兄弟節(jié)點(diǎn)對(duì)象。nextSibling只讀只讀返回右兄弟節(jié)點(diǎn)對(duì)象。返回右兄弟節(jié)點(diǎn)對(duì)象。data讀寫讀寫文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回undefined。nodeValue讀寫讀寫文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回null。DOM中的中的2個(gè)對(duì)象集合：個(gè)對(duì)象集合： attributes：節(jié)點(diǎn)內(nèi)容的對(duì)

22、象集合；：節(jié)點(diǎn)內(nèi)容的對(duì)象集合； childNodes：子節(jié)點(diǎn)的對(duì)象集合。：子節(jié)點(diǎn)的對(duì)象集合。DOMDOM樹型結(jié)構(gòu)節(jié)點(diǎn)的屬性（續(xù)）樹型結(jié)構(gòu)節(jié)點(diǎn)的屬性（續(xù)） DOMDOM的方法的方法使用使用DOM的方法生成一個(gè)表格的方法生成一個(gè)表格 使用使用DOM生成表格生成表格function genTable(pNode) var i,j; var contents=new Array(3); for (i=0;i3;i+) contentsi=new Array(2); contents00=商品類別商品類別; contents01=數(shù)量數(shù)量; contents10=日用百貨日用百貨; contents11

23、=10; contents20=電器電器; contents21=20;（續(xù)）（續(xù)）var tableNode=document.createElement(TABLE);var tBodyNode=document.createElement(TBODY);for (i=0;i3;i+) t1=document.createElement(TR); tBodyNode.appendChild(t1); for (j=0;j2;j+) t1=document.createElement(TD); t2=document.createTextNode(contentsij); t1.append

24、Child(t2); tBodyNode.childNodesi.appendChild(t1); DHTML技術(shù)的核心DOM 在某種意義上，DOM是動(dòng)態(tài)HTML的真正核心內(nèi)容。 文檔對(duì)象模型是HTML和XML的應(yīng)用編程接口。它定義了文檔的邏輯結(jié)構(gòu)和訪問(wèn)文檔的途徑。 DOM是為文檔的編程API，它非常接近它模型化的文檔結(jié)構(gòu) 理解理解DOM DOM不是一個(gè)二進(jìn)制的規(guī)范，用相同語(yǔ)言寫的DOM程序，它的源程序可以跨平臺(tái)兼容，但是DOM并沒有定義任何二進(jìn)制互操作的形式 。DOM不是堅(jiān)持把對(duì)象放到XML或HTML的方式。DOM規(guī)定了XML和HTML文檔如何以對(duì)象形式表示，從而它們可以用在面向?qū)ο蟮某绦蛑?/p>

25、 。DOM不是一套數(shù)據(jù)結(jié)構(gòu)，而是規(guī)定接口的對(duì)象模型。雖然文檔包含了顯示parent/child關(guān)系的示意圖，但這些只是由編程接口定義的邏輯關(guān)系，并不是任何特殊的內(nèi)部數(shù)據(jù)結(jié)構(gòu)的表示。 理解理解DOM（續(xù)）（續(xù)）DOM并沒有定義XML或HTML的“真正內(nèi)部語(yǔ)義”。這些語(yǔ)言的語(yǔ)義是由W3C推薦的。DOM是被設(shè)計(jì)為尊重這些語(yǔ)義的編程模型。任何用這些語(yǔ)言寫的文檔可用DOM表示。 DOM，與COM及CORBA不是一個(gè)概念，后者是規(guī)范對(duì)象和接口以實(shí)現(xiàn)語(yǔ)言無(wú)關(guān)的方式。DOM是被設(shè)計(jì)為管理HTML和XML文檔的一套接口和對(duì)象。它的實(shí)現(xiàn)可用任何語(yǔ)言無(wú)關(guān)的系統(tǒng)（COM，CORBA）或用綁定在該文檔上的特定語(yǔ)言如Ja

26、va或ECMAScript。 DOM最初的產(chǎn)生是作為允許JavaScript scripts 和Java programs在Web browsers間進(jìn)行移植的規(guī)范。 CSS及CSS-PCascading Style Sheets（層疊樣式表）的縮寫1996年底的時(shí)候悄悄誕生了一種叫做樣式表（stylesheets）的技術(shù)。將對(duì)布局、字體、顏色、背景和其它文圖效果實(shí)現(xiàn)更加精確的控制。 -只通過(guò)修改一個(gè)文件就改變頁(yè)數(shù)不定的網(wǎng)頁(yè)的外觀和格式。 -在所有瀏覽器和平臺(tái)之間的兼容性。 -更少的編碼、更少的頁(yè)數(shù)和更快的下載速度。 CSS 所能改變的性質(zhì) 字體 文字間的空間 列表顏色 背景 Margin 位

27、置 (CSS-P)QuestionCSS屬于DOM的一部分，它的屬性也可以通過(guò)動(dòng)態(tài)HTML編寫語(yǔ)言得到體現(xiàn)? Advantage of CSS你可以將格式和結(jié)構(gòu)分離。 你可以以前所未有的能力控制頁(yè)面布局。 你可以制作體積更小下載更快的網(wǎng)頁(yè)。 你可以將許多網(wǎng)頁(yè)同時(shí)更新，比以前快更容易。 瀏覽器將成為你更友好的界面CSS,DOM and ScriptCSS是你進(jìn)行網(wǎng)頁(yè)改變的對(duì)象，DOM是其具有變動(dòng)性的機(jī)制，而Client-side Scripting是實(shí)際促成變化的程序。這，就是動(dòng)態(tài)HTML。 JavaScript的瀏覽器對(duì)象及其使用的瀏覽器對(duì)象及其使用 Window對(duì)象層次對(duì)象層次Window

28、Navigator FrameDocument Location History Anchor Applet Area Form Image Link Button Hidden Radio Select Text Textarea Checkbox Password Reset SubmitNavigator對(duì)象對(duì)象主要用途主要用途 用于判別客戶瀏覽器的有關(guān)信息，以便用于判別客戶瀏覽器的有關(guān)信息，以便針對(duì)不同瀏覽器的特性而設(shè)計(jì)不同的顯針對(duì)不同瀏覽器的特性而設(shè)計(jì)不同的顯示示屬性或方法名屬性或方法名含含 義義appName以字符串形式表示的瀏覽器名稱。以字符串形式表示的瀏覽器名稱。appVers

29、ion以字符串形式表示的瀏覽器版本信以字符串形式表示的瀏覽器版本信息，包括瀏覽器的版本號(hào)、操作系息，包括瀏覽器的版本號(hào)、操作系統(tǒng)名稱等。統(tǒng)名稱等。appCodeName以字符串形式表示的瀏覽器代碼名以字符串形式表示的瀏覽器代碼名字，通常值為字，通常值為Mozilla。userAgent以字符串表示的完整的瀏覽器版本以字符串表示的完整的瀏覽器版本信息，包括了信息，包括了appName、appVersion和和appCodeName的信息。的信息。mimeType在瀏覽器中可以使用的在瀏覽器中可以使用的mime類型。類型。plugins在瀏覽器中可以使用的插件在瀏覽器中可以使用的插件(1)。jav

30、aEnabled()返回邏輯值，表示客戶瀏覽器可否返回邏輯值，表示客戶瀏覽器可否使用使用Java。（1）與窗口有關(guān)的屬性）與窗口有關(guān)的屬性 (Window對(duì)象的實(shí)例對(duì)象的實(shí)例)window、self：當(dāng)前窗口當(dāng)前窗口；parent：當(dāng)前窗口或幀（當(dāng)前窗口或幀（frame）的父窗口；）的父窗口； top：主窗口，是所有下級(jí)窗口的父窗口主窗口，是所有下級(jí)窗口的父窗口。* * 注意：引用時(shí)在它們的名稱之前不能加上對(duì)象名注意：引用時(shí)在它們的名稱之前不能加上對(duì)象名（2）與瀏覽器狀態(tài)欄有關(guān)的屬性）與瀏覽器狀態(tài)欄有關(guān)的屬性 status：瀏覽器當(dāng)前狀態(tài)欄顯示的內(nèi)容；：瀏覽器當(dāng)前狀態(tài)欄顯示的內(nèi)容； defau

31、ltStatus：瀏覽器狀態(tài)欄顯示的默認(rèn)值瀏覽器狀態(tài)欄顯示的默認(rèn)值 defaultStatus=Test“ Microsoft方方 法法含含 義義alert打開顯示信息對(duì)話框，無(wú)返回值。打開顯示信息對(duì)話框，無(wú)返回值。confirm 打開確認(rèn)對(duì)話框，返回打開確認(rèn)對(duì)話框，返回True或或Fmpt打開輸入對(duì)話框，返回用戶輸入的信息打開輸入對(duì)話框，返回用戶輸入的信息或空值或空值Null。open打開一個(gè)新窗口。打開一個(gè)新窗口。close關(guān)閉窗口。關(guān)閉窗口。例：例：Window.open “a1.htm,new_win,toolbar=no,width=200,height=200 3.

32、 Window對(duì)象（續(xù)）對(duì)象（續(xù)）（3）與對(duì)話框有關(guān)的方法與對(duì)話框有關(guān)的方法 alert(字符串字符串) ：參數(shù)字符串為顯示于對(duì)話框中的：參數(shù)字符串為顯示于對(duì)話框中的內(nèi)容，無(wú)返回值。內(nèi)容，無(wú)返回值。confirm(字符串字符串) ：參數(shù)字符串為顯示于對(duì)話框中：參數(shù)字符串為顯示于對(duì)話框中的內(nèi)容，若用戶按下的內(nèi)容，若用戶按下“確定確定”按鈕，返回按鈕，返回true，否則返回否則返回mpt(字符串字符串1, 字符串字符串2) ：字符串字符串1為顯示于對(duì)為顯示于對(duì)話框中的內(nèi)容，參數(shù)字符串話框中的內(nèi)容，參數(shù)字符串2為輸入的缺省內(nèi)容；為輸入的缺省內(nèi)容；如用戶按下如用戶按下“確定確定”按鈕

33、，返回用戶在輸入框中按鈕，返回用戶在輸入框中輸入的字符串；否則，返回輸入的字符串；否則，返回null。3. Window對(duì)象（續(xù)）對(duì)象（續(xù)）（4）與窗口生成與撤消有關(guān)的方法）與窗口生成與撤消有關(guān)的方法生成一個(gè)新窗口生成一個(gè)新窗口open(URL, WindowName ,Window Features) 參數(shù)：參數(shù)：URL：在新生成的窗口中載入的頁(yè)面；：在新生成的窗口中載入的頁(yè)面； WindowName：新窗口的名字；：新窗口的名字； Window Features：表示新窗口的外觀特：表示新窗口的外觀特征，可以指定多個(gè)特征值，各特征值之間征，可以指定多個(gè)特征值，各特征值之間以以”,”相隔：相

34、隔： 特征值格式為：特征名特征值格式為：特征名=值值返回：返回：指向新窗口的指針指向新窗口的指針關(guān)閉一個(gè)窗口：關(guān)閉一個(gè)窗口：close()3. Window對(duì)象（續(xù)）對(duì)象（續(xù)）窗口特征值表窗口特征值表 特征名特征名取取 值值含含 義義width長(zhǎng)度值長(zhǎng)度值窗口的寬度窗口的寬度height長(zhǎng)度值長(zhǎng)度值窗口的高度窗口的高度toolbar0(無(wú)無(wú))|1(有有)或或no(無(wú)無(wú))|yes(有有)是否顯示標(biāo)準(zhǔn)工具欄，缺省是否顯示標(biāo)準(zhǔn)工具欄，缺省值為值為0location0|1或或no|yes是否顯示定位欄，缺省值為是否顯示定位欄，缺省值為0。status0|1或或no|yes是否顯示狀態(tài)欄，缺省值為是否顯

35、示狀態(tài)欄，缺省值為0。menubar0|1或或no|yes是否顯示菜單欄，缺省值為是否顯示菜單欄，缺省值為0。srcollbars 0|1或或no|yes是否按需要顯示滾動(dòng)條，缺是否按需要顯示滾動(dòng)條，缺省值為省值為0。resizable0|1或或no|yes是否允許用戶改變窗口大小，是否允許用戶改變窗口大小，缺省值為缺省值為1。（5）與窗口焦點(diǎn)有關(guān)的方法）與窗口焦點(diǎn)有關(guān)的方法使窗口獲得焦點(diǎn)：使窗口獲得焦點(diǎn)：focus()使窗口失去焦點(diǎn)使窗口失去焦點(diǎn)：blur()（6）與）與“超時(shí)超時(shí)”有關(guān)的方法有關(guān)的方法設(shè)置超時(shí)：設(shè)置超時(shí)：setTimeout(expression,time)參數(shù)：參數(shù)：ex

36、pression：通常為一個(gè)函數(shù)；：通常為一個(gè)函數(shù)； time：重新：重新執(zhí)行執(zhí)行expression的時(shí)間間隔的時(shí)間間隔, 單位是單位是毫秒毫秒.返回：返回：一個(gè)標(biāo)志，用以指示這個(gè)一個(gè)標(biāo)志，用以指示這個(gè)“超時(shí)超時(shí)”設(shè)置設(shè)置。清除指定的超時(shí)設(shè)置清除指定的超時(shí)設(shè)置：clearTimeout(timeId)參數(shù)參數(shù)：timeID：由：由setTimeout返回的標(biāo)志返回的標(biāo)志3. Window對(duì)象（續(xù)）對(duì)象（續(xù)）VBScriptVBScript的的IEIE瀏覽器對(duì)象結(jié)構(gòu)瀏覽器對(duì)象結(jié)構(gòu)historynavigatorlocationeventscreenframedocumentdocumentdo

37、cumentWindow依次顯示依次顯示HTML文件中的各標(biāo)記文件中的各標(biāo)記顯示文件中的各個(gè)標(biāo)記顯示文件中的各個(gè)標(biāo)記body font-size:22px依次顯示文件中的各個(gè)標(biāo)記依次顯示文件中的各個(gè)標(biāo)記 Document.write For i=0 to Document.all.length-1 Document.write      & Document.all(i).tagName & Next（5）Document的對(duì)象數(shù)組的對(duì)象數(shù)組（續(xù)）（續(xù)）stylesheets：所有樣式屬性對(duì)象。：所有樣式屬性對(duì)象。屬性：屬性：length 方法：方法：

38、item() StyleSheet對(duì)象的主要方法：對(duì)象的主要方法：Document.StyleSheets(索引索引).addRule “標(biāo)標(biāo)記名記名”, “樣式規(guī)則樣式規(guī)則”,“樣式項(xiàng)目索引樣式項(xiàng)目索引” Document.StyleSheets(索引索引).RemoveRule “樣式項(xiàng)目索引樣式項(xiàng)目索引” tagName屬性屬性InnerHTML屬性屬性style對(duì)象的屬性對(duì)象的屬性屬性設(shè)置格式：屬性設(shè)置格式：元素元素id.style.id.style.樣式屬性名屬性的某值樣式屬性名屬性的某值標(biāo)記的屬性標(biāo)記的屬性 輸出輸出/ /輸入輸入 JavaScript JavaScript的的do

39、cumentdocument對(duì)象提供了顯示、消除、打開、對(duì)象提供了顯示、消除、打開、關(guān)閉關(guān)閉HTMLHTML頁(yè)面信息的輸出流，同時(shí)，頁(yè)面信息的輸出流，同時(shí)，JavaScriptJavaScript也可以也可以使用使用WindowWindow對(duì)象的三個(gè)方法對(duì)象的三個(gè)方法alertalert、confirmconfirm和和 promptprompt輸出信息或數(shù)據(jù)，請(qǐng)見例輸出信息或數(shù)據(jù)，請(qǐng)見例5.265.26中的應(yīng)用，方法的參數(shù)詳中的應(yīng)用，方法的參數(shù)詳情可參閱情可參閱.5節(jié)，與節(jié)，與VBScriptVBScript的方法類似，但要注意的方法類似，但要注意字母的大小寫。字母的大小寫。

40、 5.3.2 5.3.2 注釋與續(xù)行符注釋與續(xù)行符JavaScriptJavaScript也有兩種形式的注釋：也有兩種形式的注釋： l l / / 注釋內(nèi)容注釋內(nèi)容 l l / /* * 注釋內(nèi)容注釋內(nèi)容 * */ / JavaScriptJavaScript的過(guò)程的過(guò)程 和其他高級(jí)語(yǔ)言類似，和其他高級(jí)語(yǔ)言類似，JavaScriptJavaScript的函數(shù)也是一個(gè)擁有獨(dú)立名字的函數(shù)也是一個(gè)擁有獨(dú)立名字( (在程序中惟一在程序中惟一) )的一系列的一系列JavaScriptJavaScript語(yǔ)句的有機(jī)組合。一個(gè)函數(shù)可語(yǔ)句的有機(jī)組合。一個(gè)函數(shù)可以有自己的并可以在函數(shù)體內(nèi)使用的參數(shù)。它的另一個(gè)作

41、用是將以有自己的并可以在函數(shù)體內(nèi)使用的參數(shù)。它的另一個(gè)作用是將JavaScriptJavaScript語(yǔ)句同語(yǔ)句同Web Web 頁(yè)面相連接，任何一個(gè)用戶的交互動(dòng)作都可頁(yè)面相連接，任何一個(gè)用戶的交互動(dòng)作都可能引發(fā)一個(gè)事件，即間接地引起一個(gè)函數(shù)的調(diào)用，這樣的調(diào)用又稱能引發(fā)一個(gè)事件，即間接地引起一個(gè)函數(shù)的調(diào)用，這樣的調(diào)用又稱事件處理事件處理( (參見參見.4節(jié)節(jié)) )。使用函數(shù)完成項(xiàng)目有一些好處：使用函數(shù)完成項(xiàng)目有一些好處： l l 放在一個(gè)函數(shù)中的代碼在程序中可以反復(fù)調(diào)用；放在一個(gè)函數(shù)中的代碼在程序中可以反復(fù)調(diào)用； l l 用不同的函數(shù)來(lái)完成不同的功能，以函數(shù)來(lái)構(gòu)造項(xiàng)目，可以使用

42、不同的函數(shù)來(lái)完成不同的功能，以函數(shù)來(lái)構(gòu)造項(xiàng)目，可以使程序的結(jié)構(gòu)清晰；程序的結(jié)構(gòu)清晰； l l 可以將語(yǔ)句組成一個(gè)事件處理函數(shù)，并提供事件處理句柄供其可以將語(yǔ)句組成一個(gè)事件處理函數(shù)，并提供事件處理句柄供其他他 語(yǔ)句觸發(fā)。語(yǔ)句觸發(fā)。 自定義函數(shù)自定義函數(shù) 內(nèi)置函數(shù)內(nèi)置函數(shù)JavaScriptJavaScript的事件的事件 事件定義了用戶與事件定義了用戶與WebWeb頁(yè)面交互時(shí)產(chǎn)生的各種操作。頁(yè)面交互時(shí)產(chǎn)生的各種操作。瀏覽器在程序運(yùn)行的大部分時(shí)間都等待交互事件的發(fā)生，瀏覽器在程序運(yùn)行的大部分時(shí)間都等待交互事件的發(fā)生，并在事件發(fā)生時(shí)，自動(dòng)調(diào)用事件處理函數(shù)，完成事件處并在事件發(fā)生時(shí)，自動(dòng)調(diào)用事件處理函

43、數(shù)，完成事件處理過(guò)程。如果在理過(guò)程。如果在JavaScriptJavaScript腳本程序中注冊(cè)腳本程序中注冊(cè)一一個(gè)事件處個(gè)事件處理函數(shù)，瀏覽器便可以在裝入該頁(yè)面時(shí)自動(dòng)地執(zhí)行這個(gè)理函數(shù)，瀏覽器便可以在裝入該頁(yè)面時(shí)自動(dòng)地執(zhí)行這個(gè)函數(shù)。函數(shù)。 例：例： I N P U T t y p e = b u t t o n v a l u e = onclick=compute1(this.form) 鼠標(biāo)事件鼠標(biāo)事件 鍵盤事件鍵盤事件 瀏覽器事件瀏覽器事件 Load Load事件事件( (發(fā)生在瀏覽器完成一個(gè)窗口或一組框架的裝載之后發(fā)生在瀏覽器完成一個(gè)窗口或一組框架的裝載之后) ) Unload Unl

44、oad事件事件( (發(fā)生在本瀏覽器載入一個(gè)新的網(wǎng)頁(yè)之前，即離開本網(wǎng)頁(yè)后發(fā)生在本瀏覽器載入一個(gè)新的網(wǎng)頁(yè)之前，即離開本網(wǎng)頁(yè)后) ) dragdrop dragdrop事件事件( (發(fā)生在拖放一個(gè)對(duì)象到瀏覽器窗口中，發(fā)生在拖放一個(gè)對(duì)象到瀏覽器窗口中，IEIE不支持不支持) ) Submit Submit事件事件( (發(fā)生在完成信息輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí)發(fā)生在完成信息輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí)) ) JavaScriptJavaScript的對(duì)象的對(duì)象JavaScriptJavaScript實(shí)際上不完全支持面向?qū)ο蟮某绦蛟O(shè)計(jì)，只實(shí)際上不完全支持面向?qū)ο蟮某绦蛟O(shè)計(jì)，只是一種基于對(duì)象的

45、腳本語(yǔ)言。它支持開發(fā)對(duì)象類型以及是一種基于對(duì)象的腳本語(yǔ)言。它支持開發(fā)對(duì)象類型以及根據(jù)這些對(duì)象產(chǎn)生一定數(shù)量的對(duì)象實(shí)例。同時(shí)它還支持根據(jù)這些對(duì)象產(chǎn)生一定數(shù)量的對(duì)象實(shí)例。同時(shí)它還支持開發(fā)對(duì)象的可重用性，以便實(shí)現(xiàn)一次開發(fā)多次使用的目開發(fā)對(duì)象的可重用性，以便實(shí)現(xiàn)一次開發(fā)多次使用的目的。的。 1.1.內(nèi)置對(duì)象內(nèi)置對(duì)象 ArrayArray對(duì)象對(duì)象( (提供一個(gè)數(shù)組的模型，存儲(chǔ)大量有序的提供一個(gè)數(shù)組的模型，存儲(chǔ)大量有序的數(shù)據(jù)數(shù)據(jù)) ) DateDate對(duì)象對(duì)象( (處理日期和時(shí)間的存儲(chǔ)、轉(zhuǎn)化和表達(dá)處理日期和時(shí)間的存儲(chǔ)、轉(zhuǎn)化和表達(dá)) ) EventEvent對(duì)象對(duì)象( (提供對(duì)提供對(duì)JavaScriptJav

46、aScript事件的各種處理信息事件的各種處理信息) ) MathMath對(duì)象對(duì)象( (處理所有的數(shù)學(xué)運(yùn)算處理所有的數(shù)學(xué)運(yùn)算) ) StringString對(duì)象對(duì)象( (處理所有的字符串操作處理所有的字符串操作) ) 瀏覽器對(duì)象瀏覽器對(duì)象 anchors anchors對(duì)象對(duì)象( (為處理錨提供屬性和方法為處理錨提供屬性和方法) ) document document對(duì)象對(duì)象( (提供對(duì)頁(yè)面各種特性的設(shè)置提供對(duì)頁(yè)面各種特性的設(shè)置) ) forms forms對(duì)象對(duì)象( (為處理表單或界面對(duì)象提供屬性和方法為處理表單或界面對(duì)象提供屬性和方法) ) frame frame對(duì)象對(duì)象( (提供對(duì)框架特

47、性的設(shè)置提供對(duì)框架特性的設(shè)置) ) history history對(duì)象對(duì)象( (提供已訪問(wèn)過(guò)網(wǎng)頁(yè)的提供已訪問(wèn)過(guò)網(wǎng)頁(yè)的URLURL地址地址) ) links links對(duì)象對(duì)象( (為處理超鏈接提供屬性和方法為處理超鏈接提供屬性和方法) ) location location對(duì)象對(duì)象( (給出當(dāng)前網(wǎng)頁(yè)的給出當(dāng)前網(wǎng)頁(yè)的URLURL地址地址) ) navigation navigation對(duì)象對(duì)象( (提供瀏覽器版本號(hào)、運(yùn)行平臺(tái)、提供瀏覽器版本號(hào)、運(yùn)行平臺(tái)、瀏覽器使用語(yǔ)言等瀏覽器使用語(yǔ)言等) ) window window對(duì)象對(duì)象( (是腳本對(duì)象層次的最高層，代表著一是腳本對(duì)象層次的最高層，代表著一

48、個(gè)瀏覽器窗口個(gè)瀏覽器窗口) )JavaScriptJavaScript的對(duì)象的對(duì)象 3. 3. 對(duì)象創(chuàng)建對(duì)象創(chuàng)建 在在JavaScriptJavaScript中除了使用系統(tǒng)的對(duì)象以外，用戶還中除了使用系統(tǒng)的對(duì)象以外，用戶還可以創(chuàng)建自己的對(duì)象，其方法是創(chuàng)建一個(gè)構(gòu)造函數(shù)：可以創(chuàng)建自己的對(duì)象，其方法是創(chuàng)建一個(gè)構(gòu)造函數(shù)： 定義一個(gè)構(gòu)造函數(shù)用來(lái)說(shuō)明這個(gè)對(duì)象的各種屬性，并可對(duì)各定義一個(gè)構(gòu)造函數(shù)用來(lái)說(shuō)明這個(gè)對(duì)象的各種屬性，并可對(duì)各屬性初始化；屬性初始化； 創(chuàng)建對(duì)象需要的各種方法，并在對(duì)象上注冊(cè)這些方法；創(chuàng)建對(duì)象需要的各種方法，并在對(duì)象上注冊(cè)這些方法； 使用使用new new 語(yǔ)句創(chuàng)建一個(gè)該對(duì)象的對(duì)象實(shí)例。語(yǔ)

49、句創(chuàng)建一個(gè)該對(duì)象的對(duì)象實(shí)例。 例如：例如：function objectName(property1, property2, , propertyN)function objectName(property1, property2, , propertyN) this. Property1 = property1; this. Property1 = property1; this. property2 = property2; this. property2 = property2; pertyN = propertyN; pertyN = propertyN

50、; this.registerMethod = registerMethod this.registerMethod = registerMethod / /注冊(cè)函數(shù)注冊(cè)函數(shù)registerMethodregisterMethod 注意，函數(shù)注意，函數(shù)registerMethodregisterMethod必須事先已定義，作為對(duì)象的方法必須事先已定義，作為對(duì)象的方法在此注冊(cè)在此注冊(cè)XSLTXSLT是Extensible Stylesheet Language Transformations的縮寫XSLT 轉(zhuǎn)換XML文檔到其他通常使用的格式，一般是HTML文檔XSLT使用兩種文件( uses t

51、wo input files:) XML文檔包含實(shí)際的數(shù)據(jù) XSL文檔包含顯示框架（both the “framework” in which to insert the data, and XSLT commands to do so）很簡(jiǎn)單的例子文件data.xml: Howdy!文件render.xsl: .xsl 文件一個(gè)XSLT文檔使用.xsl作為文件后綴名 XSLT文檔使用以下的文件頭: 包含一個(gè)或更多的templates, 例如: . 使用下列語(yǔ)句來(lái)結(jié)束: 查找message文本The template says to select the entire file You can

52、 think of this as selecting the root node of the XML treeInside this template, selects the message child Alternative Xpath expressions that would also work: ./message /message/text() (text() is an XPath function) ./message/text()文件解讀The XSL was: 選擇根節(jié)點(diǎn) 被寫到輸出文檔Message的內(nèi)容被寫到輸出文檔中 被寫到輸出文檔The resultant f

53、ile looks like: Howdy! XSLT如何工作XML文檔被讀入并存儲(chǔ)為一棵節(jié)點(diǎn)樹（ is read in and stored as a tree of nodes）The template is used to select the entire treeThe rules（規(guī)則） within the template（模版） are applied to the matching（匹配） nodes, thus changing the structure of the XML tree If there are other templates, they must be

54、 called explicitly（明確地）from the main templateUnmatched parts of the XML tree are not changedAfter the template is applied（應(yīng)用）, the tree is written out again as a text documentXSLT應(yīng)用范圍使用適合的程序例如 Xerces, XSLT能被用于閱讀或?qū)懳臋nWEB應(yīng)用服務(wù)器能使用 XSLT 在服務(wù)器端轉(zhuǎn)換XML文檔到HTML文檔并送到客戶端A modern browser can use XSLT to change XML

55、 into HTML on the client side This is what we will mostly be doing in this classMost users seldom update their browsers If you want “everyone” to see your pages, do any XSL processing on the server side Otherwise, think about what best fits your situationModern browsersInternet Explorer 6 best suppo

56、rts XMLNetscape 6 supports some of XMLInternet Explorer 5.x supports an obsolete （過(guò)時(shí)的）version of XML IE5 is not good enough for this course If you must use IE5, the initial PI is different (you can look it up if you ever need it)xsl:value-of選擇一個(gè)節(jié)點(diǎn)的內(nèi)容并達(dá)到輸出流中（ selects the contents of an element and ad

57、ds it to the output stream） The select attribute（屬性） is required Notice that xsl:value-of is not a container（容器）, hence it needs to end with a slash（/ 反斜杠）Example (前面有的): xsl:for-eachxsl:for-each is a kind of loop statement（循環(huán)語(yǔ)句）The syntax（語(yǔ)法） is Text to insert and rules to apply Example: to select

58、every book (/book) and make an unordered list () of their titles (title), use: 過(guò)濾輸出You can filter (restrict) output by adding a criterion to the select attributes value: 這段代碼將輸出作者是Terry Pratchett的書名Filter（過(guò)濾器）detailsHere is the filter we just used: author is a sibling（兄弟, 姐妹, 同胞, 同屬）of title, so fro

59、m title we have to go up to its parent, book, then back down to authorThis filter requires a quote（引號(hào)） within a quote, so we need both single quotes and double quotesLegal filter operators are:= 等于 != 不等于 < 小于 >大于 Numbers should be quoted（被引號(hào)引起來(lái)）, but apparently dont have to be但是它不是我們需要的形式Here

60、s what we did: 這段代碼將所有的書都包含在 and ，所以除了Terry Pratchett外其他書名都是空白There is no obvious（明顯） way to solve（解決） this with just xsl:value-ofxsl:ifxsl:if allows us to include content if a given condition (in the test attribute) is trueExample: This does work correctly!xsl:choose語(yǔ)句The xsl:choose . xsl:when . xs