第七講（上）DHTML介紹 計(jì)算機(jī)網(wǎng)絡(luò)安全與防護(hù)的PPT 互聯(lián)網(wǎng)軟件開(kāi)發(fā)

1、第七講上第七講上DHTMLDHTML介紹介紹 計(jì)算機(jī)網(wǎng)絡(luò)計(jì)算機(jī)網(wǎng)絡(luò)平安與防護(hù)的平安與防護(hù)的PPT PPT 互聯(lián)網(wǎng)軟件開(kāi)發(fā)互聯(lián)網(wǎng)軟件開(kāi)發(fā)第七章：第七章： DHTML介紹介紹內(nèi)容提綱內(nèi)容提綱1、DHTML概述概述2、文檔對(duì)象模型、文檔對(duì)象模型7.1 DHTML概述什么是什么是DHTMLDHTMLDynamic HTML，就是動(dòng)態(tài)的，就是動(dòng)態(tài)的html，是相對(duì)傳統(tǒng)的靜態(tài)的是相對(duì)傳統(tǒng)的靜態(tài)的html而言的一種制作網(wǎng)頁(yè)的而言的一種制作網(wǎng)頁(yè)的概念。概念。DHTML并不是一門(mén)新的語(yǔ)言，它只是并不是一門(mén)新的語(yǔ)言，它只是HTML、CSS和客戶(hù)端腳本的一種集成，即一個(gè)頁(yè)面中包和客戶(hù)端腳本的一種集成，即一個(gè)頁(yè)面中包

2、括括html+css+javascript(或其它客戶(hù)端腳本或其它客戶(hù)端腳本)。DHTML不是由萬(wàn)維網(wǎng)聯(lián)盟不是由萬(wàn)維網(wǎng)聯(lián)盟W3C規(guī)定的標(biāo)準(zhǔn)，規(guī)定的標(biāo)準(zhǔn)，只是一種將目前已有的網(wǎng)頁(yè)技術(shù)、語(yǔ)言標(biāo)準(zhǔn)整合只是一種將目前已有的網(wǎng)頁(yè)技術(shù)、語(yǔ)言標(biāo)準(zhǔn)整合運(yùn)用，制作出能在下載后仍然能實(shí)時(shí)變換頁(yè)面元運(yùn)用，制作出能在下載后仍然能實(shí)時(shí)變換頁(yè)面元素效果的網(wǎng)頁(yè)設(shè)計(jì)概念。素效果的網(wǎng)頁(yè)設(shè)計(jì)概念。7.1 DHTML概述DHTMLDHTML技術(shù)技術(shù)通過(guò)通過(guò) DHTML DHTML，Web Web 開(kāi)發(fā)者可控制如何在瀏覽器窗口開(kāi)發(fā)者可控制如何在瀏覽器窗口中顯示和定位中顯示和定位 HTML HTML 元素。元素。 HTMLHTML：頁(yè)

3、面中的各種頁(yè)面元素對(duì)象，它們是被動(dòng)態(tài)：頁(yè)面中的各種頁(yè)面元素對(duì)象，它們是被動(dòng)態(tài)操縱的內(nèi)容之一；操縱的內(nèi)容之一；文檔對(duì)象模型文檔對(duì)象模型DOMDOM：HTML DOM HTML DOM 定義了針對(duì)定義了針對(duì) HTML HTML 的一套標(biāo)準(zhǔn)的對(duì)象，以及訪問(wèn)和處理的一套標(biāo)準(zhǔn)的對(duì)象，以及訪問(wèn)和處理 HTML HTML文檔文檔 對(duì)象的標(biāo)準(zhǔn)方法。對(duì)象的標(biāo)準(zhǔn)方法。層疊樣式表層疊樣式表CSSCSS：用于：用于 HTML HTML 文檔的樣式和布文檔的樣式和布局模型。局模型。JavaScriptJavaScript：一段程序，通過(guò)操縱：一段程序，通過(guò)操縱WebWeb頁(yè)上的各種頁(yè)上的各種對(duì)象完成某些特殊的功能。對(duì)象

4、完成某些特殊的功能。7.2 文檔對(duì)象模型什么是什么是DOMDOM1 1定義：文檔對(duì)象模型定義：文檔對(duì)象模型Document Object ModelDocument Object Model是由是由W3CW3C委員會(huì)定義的標(biāo)準(zhǔn)文檔對(duì)象模型。委員會(huì)定義的標(biāo)準(zhǔn)文檔對(duì)象模型。W3CW3C解解釋為：釋為：“文檔對(duì)象模型文檔對(duì)象模型DOMDOM是一個(gè)能夠讓程序是一個(gè)能夠讓程序和腳本動(dòng)態(tài)訪問(wèn)和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的和腳本動(dòng)態(tài)訪問(wèn)和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的語(yǔ)言平臺(tái)，提供了標(biāo)準(zhǔn)的語(yǔ)言平臺(tái)，提供了標(biāo)準(zhǔn)的HTMLHTML和和XMLXML對(duì)象集，并有對(duì)象集，并有一個(gè)標(biāo)準(zhǔn)的接口來(lái)訪問(wèn)操作它們一個(gè)標(biāo)準(zhǔn)的接口來(lái)訪問(wèn)

5、操作它們DOMDOM的由來(lái)：最初是的由來(lái)：最初是W3CW3C為了解決瀏覽器混戰(zhàn)時(shí)代不為了解決瀏覽器混戰(zhàn)時(shí)代不同瀏覽器環(huán)境之間的差異而制定的模型標(biāo)準(zhǔn)。基同瀏覽器環(huán)境之間的差異而制定的模型標(biāo)準(zhǔn)。基于于DOMDOM標(biāo)準(zhǔn)，標(biāo)準(zhǔn)，WebWeb開(kāi)發(fā)人員可以很快捷、平安創(chuàng)立開(kāi)發(fā)人員可以很快捷、平安創(chuàng)立多樣化的程序。多樣化的程序。DOMDOM可以提供了可以提供了HTMLHTML和和XMLXML兩種文檔編程接口，其中兩種文檔編程接口，其中HTMLHTML文檔編程接口可以處理文檔編程接口可以處理HTMLHTML文檔內(nèi)容。文檔內(nèi)容。7.2 文檔對(duì)象模型什么是什么是DOMDOM2 2DOMDOM實(shí)際上是以面向?qū)ο蠓绞?/p>

6、描述的文檔模型。實(shí)際上是以面向?qū)ο蠓绞矫枋龅奈臋n模型。DOMDOM定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。行為和屬性以及這些對(duì)象之間的關(guān)系。DOMDOM將整個(gè)頁(yè)面映射為一個(gè)由層次節(jié)點(diǎn)組成的文件將整個(gè)頁(yè)面映射為一個(gè)由層次節(jié)點(diǎn)組成的文件節(jié)點(diǎn)樹(shù)節(jié)點(diǎn)樹(shù)DOM DOM 是與編程語(yǔ)言無(wú)關(guān)的，因此有多種實(shí)現(xiàn)，可以是與編程語(yǔ)言無(wú)關(guān)的，因此有多種實(shí)現(xiàn)，可以和任何程序語(yǔ)言共同運(yùn)作，如和任何程序語(yǔ)言共同運(yùn)作，如 C/C+ C/C+、VBVB、JavaJava、C#C#。WebWeb開(kāi)發(fā)中最常和開(kāi)發(fā)中最常和JavaScriptJavaScr

7、ipt合作。合作。7.2 文檔對(duì)象模型DOMDOM的標(biāo)準(zhǔn)的標(biāo)準(zhǔn)DOMDOM的概念主要有：的概念主要有：核心核心DOMDOM：將帶有標(biāo)記的文檔看成樹(shù)狀結(jié)構(gòu)并據(jù)此對(duì)：將帶有標(biāo)記的文檔看成樹(shù)狀結(jié)構(gòu)并據(jù)此對(duì)文檔進(jìn)行操作；文檔進(jìn)行操作；DOMDOM事件：包括使用者熟悉的鼠標(biāo)、鍵盤(pán)事件，同時(shí)事件：包括使用者熟悉的鼠標(biāo)、鍵盤(pán)事件，同時(shí)包括包括DOMDOM特有事件，當(dāng)操作文檔對(duì)象模型的各元素特有事件，當(dāng)操作文檔對(duì)象模型的各元素對(duì)象時(shí)發(fā)生。對(duì)象時(shí)發(fā)生。HTML DOMHTML DOM：提供用于操作：提供用于操作HTMLHTML文檔以及類(lèi)似于文檔以及類(lèi)似于JavascriptJavascript對(duì)象模型語(yǔ)法的功能

8、部件，在核心對(duì)象模型語(yǔ)法的功能部件，在核心DOMDOM的根底上支持對(duì)所有的根底上支持對(duì)所有HTMLHTML元素對(duì)象進(jìn)行操作。元素對(duì)象進(jìn)行操作。DOM CSSDOM CSS：提供腳本編程實(shí)現(xiàn)：提供腳本編程實(shí)現(xiàn)CSSCSS的接口。的接口。7.2 文檔對(duì)象模型HTML DOMHTML DOM節(jié)點(diǎn)樹(shù)節(jié)點(diǎn)樹(shù)HTML DOM HTML DOM 把把 HTML HTML 文檔呈現(xiàn)為帶有元素、屬性和文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)節(jié)點(diǎn)樹(shù)。文本的樹(shù)結(jié)構(gòu)節(jié)點(diǎn)樹(shù)。圖圖7.1.1 HTML DOM7.1.1 HTML DOM節(jié)點(diǎn)樹(shù)節(jié)點(diǎn)樹(shù)7.2 文檔對(duì)象模型DOMDOM節(jié)點(diǎn)節(jié)點(diǎn)根據(jù) DOM，HTML 文檔中的每個(gè)

9、成分都是一個(gè)節(jié)點(diǎn)。DOM 是這樣規(guī)定的：l整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)l每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)l包含在 HTML 元素中的文本是文本節(jié)點(diǎn)l每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)l注釋屬于注釋節(jié)點(diǎn)7.2 文檔對(duì)象模型節(jié)點(diǎn)的層次節(jié)點(diǎn)的層次 DOM Tutorial DOM Lesson one Hello world! l父節(jié)點(diǎn)：除文檔節(jié)點(diǎn)之外的每個(gè)父節(jié)點(diǎn)：除文檔節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。舉例，節(jié)點(diǎn)都有父節(jié)點(diǎn)。舉例， 和和 的父節(jié)點(diǎn)是的父節(jié)點(diǎn)是 節(jié)節(jié)點(diǎn)，文本節(jié)點(diǎn)點(diǎn)，文本節(jié)點(diǎn) Hello world! 的的父節(jié)點(diǎn)是父節(jié)點(diǎn)是 節(jié)點(diǎn)。節(jié)點(diǎn)。l子節(jié)點(diǎn)：大局部元素節(jié)點(diǎn)都有子子節(jié)點(diǎn)：大局部元素節(jié)點(diǎn)都有

10、子節(jié)點(diǎn)。比方說(shuō)，節(jié)點(diǎn)。比方說(shuō)， 節(jié)點(diǎn)有一節(jié)點(diǎn)有一個(gè)子節(jié)點(diǎn)：個(gè)子節(jié)點(diǎn)： 節(jié)點(diǎn)。節(jié)點(diǎn)。 節(jié)點(diǎn)也有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn)節(jié)點(diǎn)也有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn) DOM Tutorial。l同級(jí)節(jié)點(diǎn)：當(dāng)節(jié)點(diǎn)分享同一個(gè)父同級(jí)節(jié)點(diǎn)：當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)，它們就是同級(jí)節(jié)點(diǎn)。比節(jié)點(diǎn)時(shí)，它們就是同級(jí)節(jié)點(diǎn)。比方說(shuō)，方說(shuō)， 和和 是同輩，因?yàn)槭峭?，因?yàn)樗鼈兊母腹?jié)點(diǎn)均是它們的父節(jié)點(diǎn)均是 節(jié)點(diǎn)。節(jié)點(diǎn)。7.2 文檔對(duì)象模型DOMDOM訪問(wèn)節(jié)點(diǎn)訪問(wèn)節(jié)點(diǎn)可通過(guò)以下方法來(lái)查找希望操作的元素：可通過(guò)以下方法來(lái)查找希望操作的元素：通過(guò)使用通過(guò)使用 getElementById() getElementById() 和和 getEleme

11、ntsByTagName() getElementsByTagName() 方法方法getElementById() getElementById() 可通過(guò)指定的可通過(guò)指定的 ID ID 來(lái)返回元素來(lái)返回元素，例如，例如document.getElementById(maindiv)document.getElementById(maindiv)返回返回IDID為為maindivmaindiv的元素。的元素。getElementsByTagName() getElementsByTagName() 方法會(huì)使用指定的標(biāo)簽方法會(huì)使用指定的標(biāo)簽名返回所有的元素作為一個(gè)節(jié)點(diǎn)列表，如名返回所有的元素作

12、為一個(gè)節(jié)點(diǎn)列表，如document.getElementsByTagName(“pdocument.getElementsByTagName(“p) )返回頁(yè)返回頁(yè)面中所有面中所有元素元素這兩種方法會(huì)返回任何你所需要的這兩種方法會(huì)返回任何你所需要的 HTML HTML 元素，不元素，不管它們?cè)谖臋n結(jié)構(gòu)中的哪個(gè)層次。管它們?cè)谖臋n結(jié)構(gòu)中的哪個(gè)層次。7.2 文檔對(duì)象模型節(jié)點(diǎn)列表節(jié)點(diǎn)列表nodeListnodeList當(dāng)使用節(jié)點(diǎn)列表時(shí)，通常要把列表保存在一個(gè)變量當(dāng)使用節(jié)點(diǎn)列表時(shí)，通常要把列表保存在一個(gè)變量中：中：var x=document.getElementsByTagName(p);var x=

13、document.getElementsByTagName(p);變量變量 x x 包含著頁(yè)面中所有包含著頁(yè)面中所有 元素的一個(gè)列表，元素的一個(gè)列表，可以通過(guò)索引號(hào)來(lái)訪問(wèn)這些可以通過(guò)索引號(hào)來(lái)訪問(wèn)這些 元素。元素。通過(guò)使用通過(guò)使用 length length 屬性來(lái)循環(huán)遍歷節(jié)點(diǎn)列表：屬性來(lái)循環(huán)遍歷節(jié)點(diǎn)列表：var x=document.getElementsByTagName(p);var x=document.getElementsByTagName(p); for (var i=0;ix.length;i+) for (var i=0;ix.length;i+) / do something

14、 with each paragraph / do something with each paragraph 7.2 文檔對(duì)象模型parentNodeparentNode、firstChildfirstChild以及以及l(fā)astChildlastChild John Doe Alaska l可以通過(guò)使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild 屬性來(lái)查找和訪問(wèn)元素。l在右邊的HTML代碼中，第一個(gè) 是 元素的首個(gè)子元素firstChild，而最后一個(gè) 是 元素的最后一個(gè)子元素lastChild。此外， 是每個(gè) 元 素的父節(jié)點(diǎn)parentNode。7

15、.2 文檔對(duì)象模型根節(jié)點(diǎn)根節(jié)點(diǎn)l有兩種特殊的文檔屬性可用來(lái)訪問(wèn)根節(jié)點(diǎn)：l第一個(gè)屬性可返回存在于 XML 以及 HTML 文檔中的文檔根節(jié)點(diǎn)；第二個(gè)屬性是對(duì) HTML 頁(yè)面的特殊擴(kuò)展，提供了對(duì) 標(biāo)簽的直接訪問(wèn)。7.2 文檔對(duì)象模型常用的對(duì)象常用的對(duì)象表7.1.1 常用對(duì)象對(duì)象對(duì)象描述描述WindowJavaScript 層級(jí)中的頂層對(duì)象，表示瀏覽器窗口Navigator包含客戶(hù)端瀏覽器的信息History包含了瀏覽器窗口訪問(wèn)過(guò)的 URLLocation包含了當(dāng)前 URL 的信息Document代表整個(gè) HTML 文檔，可被用來(lái)訪問(wèn)頁(yè)面中的所有元素7.2 文檔對(duì)象模型WindowWindow對(duì)象對(duì)

16、象WindowWindow對(duì)象在對(duì)象在JavascriptJavascript瀏覽器對(duì)象的層次圖中位瀏覽器對(duì)象的層次圖中位于最高一層，具有唯一性，只要瀏覽器窗口翻開(kāi)于最高一層，具有唯一性，只要瀏覽器窗口翻開(kāi)，就會(huì)建立，就會(huì)建立WindowWindow對(duì)象。對(duì)象。WindowWindow對(duì)象中存放的是瀏覽器整個(gè)窗口的屬性，包對(duì)象中存放的是瀏覽器整個(gè)窗口的屬性，包括各種工具條的設(shè)置、瀏覽器的外觀以及括各種工具條的設(shè)置、瀏覽器的外觀以及DocumentDocument對(duì)象、對(duì)象、HistoryHistory對(duì)象、對(duì)象、LocationLocation對(duì)象等對(duì)象等內(nèi)容。內(nèi)容。7.2 文檔對(duì)象模型Win

17、dowWindow對(duì)象的屬性對(duì)象的屬性1 1表表7.1.2 Window7.1.2 Window對(duì)象的常用屬性對(duì)象的常用屬性屬性屬性描述描述closed返回窗口是否已被關(guān)閉。defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。document對(duì) Document 對(duì)象的只讀引用history對(duì) History 對(duì)象的只讀引用。location用于窗口或框架的 Location 對(duì)象opener返回對(duì)創(chuàng)建此窗口的窗口的引用status設(shè)置窗口狀態(tài)欄的文本。top返回最頂層的先輩窗口。7.2 文檔對(duì)象模型WindowWindow對(duì)象的屬性對(duì)象的屬性2 2ClosedClosed、Opene

18、rOpener屬性屬性ClosedClosed屬性可以判斷一個(gè)窗口是否已經(jīng)被關(guān)閉；屬性可以判斷一個(gè)窗口是否已經(jīng)被關(guān)閉；通過(guò)通過(guò)OpenerOpener屬性可以通過(guò)一個(gè)窗口來(lái)操縱它的父窗屬性可以通過(guò)一個(gè)窗口來(lái)操縱它的父窗口?？凇．?dāng)一個(gè)窗口翻開(kāi)另外一個(gè)窗口后，它們只是通過(guò)當(dāng)一個(gè)窗口翻開(kāi)另外一個(gè)窗口后，它們只是通過(guò)OpenerOpener屬性，子窗口可以和父窗口發(fā)生聯(lián)系，屬性，子窗口可以和父窗口發(fā)生聯(lián)系，通過(guò)通過(guò)Open()Open()方法的返回值，父窗口可以和子窗口發(fā)方法的返回值，父窗口可以和子窗口發(fā)生聯(lián)系，這樣兩個(gè)相關(guān)的窗口之間就可以實(shí)現(xiàn)互生聯(lián)系，這樣兩個(gè)相關(guān)的窗口之間就可以實(shí)現(xiàn)互操作操作7.2

19、 文檔對(duì)象模型WindowWindow對(duì)象的屬性對(duì)象的屬性3 3defaultStatusdefaultStatus、statusstatus屬性屬性defaultStartusdefaultStartus屬性的值是在瀏覽器窗口下面的狀屬性的值是在瀏覽器窗口下面的狀態(tài)欄中缺省顯示的信息，態(tài)欄中缺省顯示的信息，statusstatus屬性的值是狀態(tài)屬性的值是狀態(tài)欄中當(dāng)前顯示的信息。欄中當(dāng)前顯示的信息。例如，將瀏覽器狀態(tài)欄的當(dāng)前顯示的信息通過(guò)對(duì)話例如，將瀏覽器狀態(tài)欄的當(dāng)前顯示的信息通過(guò)對(duì)話框反響給用戶(hù)：框反響給用戶(hù)：a href=3-44.htm 測(cè)試測(cè)試WindowWindow對(duì)象的對(duì)象的sta

20、tusstatus屬性的用法屬性的用法DocumentDocument、HistoryHistory、LocationLocation屬性屬性DocumentDocument屬性、屬性、HistoryHistory屬性、屬性、LocationLocation屬性就是屬性就是瀏覽器對(duì)象中的瀏覽器對(duì)象中的DocumentDocument對(duì)象、對(duì)象、HistoryHistory對(duì)象、對(duì)象、LocationLocation對(duì)象對(duì)象7.2 文檔對(duì)象模型WindowWindow對(duì)象的方法對(duì)象的方法1 1表表7.1.3 Window7.1.3 Window對(duì)象的常用方法對(duì)象的常用方法方法方法描述描述aler

21、t()顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。close()關(guān)閉瀏覽器窗口open()打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框7.2 文檔對(duì)象模型WindowWindow對(duì)象的方法對(duì)象的方法2 2Open(Open(頁(yè)面地址，窗口名稱(chēng)，窗口風(fēng)格頁(yè)面地址，窗口名稱(chēng)，窗口風(fēng)格) )方法方法Open()Open()方法能夠翻開(kāi)一個(gè)窗口，返回的是窗口的引方法能夠翻開(kāi)一個(gè)窗口，返回的是窗口的引用，用，它有它有3 3個(gè)參數(shù)：頁(yè)面地址、窗口名稱(chēng)和窗口風(fēng)格個(gè)參數(shù)：頁(yè)面地址、窗口名稱(chēng)和窗口風(fēng)格窗口風(fēng)格中可以指定瀏覽器是否具有窗口風(fēng)格中可以指定瀏

22、覽器是否具有toolbartoolbar工工具欄、具欄、LocationLocation地址欄、地址欄、directoriesdirectories目錄按鈕、目錄按鈕、statusstatus狀態(tài)欄、狀態(tài)欄、menubarmenubar菜單菜單條、條、scrollbarsscrollbars滾動(dòng)條，它們可以設(shè)置為滾動(dòng)條，它們可以設(shè)置為yesyes或或nono，窗口風(fēng)格也可以指定瀏覽器窗口的，窗口風(fēng)格也可以指定瀏覽器窗口的widthwidth寬和寬和heightheight高。高。例如點(diǎn)此查看：翻開(kāi)一個(gè)窗口例如點(diǎn)此查看：翻開(kāi)一個(gè)窗口7.2 文檔對(duì)象模型WindowWindow對(duì)象的方法對(duì)象的方法

23、3 3alert()alert()方法方法alert()alert()方法的功能是彈出一個(gè)警告框，在警告框方法的功能是彈出一個(gè)警告框，在警告框內(nèi)顯示字符串文本，通常，在給用戶(hù)某些警告信內(nèi)顯示字符串文本，通常，在給用戶(hù)某些警告信息的時(shí)候使用。息的時(shí)候使用。例如例如7.2 文檔對(duì)象模型WindowWindow對(duì)象的事件對(duì)象的事件表7.1.4 Window對(duì)象的常用事件事件事件描述描述onfocus當(dāng)對(duì)象獲得焦點(diǎn)時(shí)觸發(fā)onload在瀏覽器完成對(duì)象的裝載后立即觸發(fā)onunload在對(duì)象卸載前立即觸發(fā)onresize當(dāng)對(duì)象的大小將要改變時(shí)觸發(fā)onscroll當(dāng)用戶(hù)滾動(dòng)對(duì)象的滾動(dòng)條時(shí)觸發(fā)7.2 文檔對(duì)象模

24、型DucumentDucument對(duì)象對(duì)象lDocument對(duì)象代表的是當(dāng)前的整個(gè)頁(yè)面，使用 document 對(duì)象可以對(duì) HTML 文檔進(jìn)行檢查、修改或添加內(nèi)容，并處理該文檔內(nèi)部的事件。l在 Web 頁(yè)面上，document 對(duì)象可通過(guò) window 對(duì)象的 document 屬性引用，或者直接引用。7.2 文檔對(duì)象模型DocumentDocument對(duì)象集合對(duì)象集合表7.1.5 Document常用對(duì)象集合集合集合描述描述all提供對(duì)文檔中所有 HTML 元素的訪問(wèn)。anchors 獲取所有帶有 name 和/或 id 屬性的 a 對(duì)象的集合applets獲取文檔中所有 applet 對(duì)象

25、的集合forms獲取以源順序排列的文檔中所有 form 對(duì)象的集合frames獲取給定文檔定義或與給定窗口關(guān)聯(lián)的文檔定義的所有 window 對(duì)象的集合images獲取以源順序排列的文檔中所有 img 對(duì)象的集合7.2 文檔對(duì)象模型DocumentDocument對(duì)象屬性對(duì)象屬性表7.1.6 Document對(duì)象常用屬性屬性屬性描述描述bgColor設(shè)置或獲取表明對(duì)象后面的背景顏色的值cookie設(shè)置或獲取 cookie 的字符串值documentElement獲取對(duì)文檔根結(jié)點(diǎn)的引用fgColor設(shè)置或獲取文檔的前景(文本)顏色linkColor設(shè)置或獲取對(duì)象文檔鏈接的顏色parentWind

26、ow獲取容器對(duì)象所在窗口的引用URL設(shè)置或獲取當(dāng)前文檔的 URL7.2 文檔對(duì)象模型DocumentDocument對(duì)象方法對(duì)象方法表7.1.7 Document對(duì)象常用方法方法方法描述描述close()關(guān)閉用 document.open() 方法打開(kāi)的輸出流，并顯示選定的數(shù)據(jù)。getElementById()返回對(duì)擁有指定 id 的第一個(gè)對(duì)象的引用getElementsByName()返回帶有指定名稱(chēng)的對(duì)象集合getElementsByTagName()返回帶有指定標(biāo)簽名的對(duì)象集合open()打開(kāi)一個(gè)流，以收集來(lái)自任何 document.write() 或 document.writeln(

27、) 方法的輸出write()向文檔寫(xiě) HTML 表達(dá)式 或 JavaScript 代碼。writeln()等同于 write() 方法，不同的是在每個(gè)表達(dá)式之后寫(xiě)一個(gè)換行符。7.2 文檔對(duì)象模型HistoryHistory對(duì)象對(duì)象1 1在用戶(hù)在網(wǎng)上瀏覽時(shí)，瀏覽器中維護(hù)著一個(gè)用戶(hù)最在用戶(hù)在網(wǎng)上瀏覽時(shí)，瀏覽器中維護(hù)著一個(gè)用戶(hù)最近訪問(wèn)過(guò)的近訪問(wèn)過(guò)的URLURL地址數(shù)組，通過(guò)地址數(shù)組，通過(guò) History History對(duì)象，可對(duì)象，可以獲得最近訪問(wèn)過(guò)的以獲得最近訪問(wèn)過(guò)的URLURL地址。地址。運(yùn)用運(yùn)用HistoryHistory對(duì)象的對(duì)象的back()back()、 forward() forwar

28、d()方法，能方法，能夠獲得和瀏覽器工具欄中的夠獲得和瀏覽器工具欄中的“后退、后退、“前進(jìn)前進(jìn)按鈕相同的效果。借助于按鈕相同的效果。借助于HistoryHistory對(duì)象，可以獲取對(duì)象，可以獲取瀏覽器訪問(wèn)過(guò)地址的信息瀏覽器訪問(wèn)過(guò)地址的信息history history 對(duì)象并不給出瀏覽器歷史的實(shí)際對(duì)象并不給出瀏覽器歷史的實(shí)際 URL URL。該。該對(duì)象只提供了通過(guò)對(duì)象只提供了通過(guò) back, forward back, forward 和和 go go 方法方法在瀏覽器歷史中導(dǎo)航的功能。瀏覽器歷史中的特在瀏覽器歷史中導(dǎo)航的功能。瀏覽器歷史中的特定文檔可以由與當(dāng)前頁(yè)面相對(duì)的索引值代表。例定文檔可

29、以由與當(dāng)前頁(yè)面相對(duì)的索引值代表。例如，指定如，指定 -1 -1 作為作為 go go 方法的參數(shù)和單擊方法的參數(shù)和單擊“后退后退按鈕一樣。按鈕一樣。7.2 文檔對(duì)象模型HistoryHistory對(duì)象對(duì)象2 2HistoryHistory對(duì)象的屬性對(duì)象的屬性lengthlength獲取歷史列表中的元素獲取歷史列表中的元素?cái)?shù)目。數(shù)目。HistoryHistory對(duì)象的方法有三個(gè)：對(duì)象的方法有三個(gè)：back()back()：載入歷史記錄中前一個(gè)歷史記錄的：載入歷史記錄中前一個(gè)歷史記錄的URLURL地地址址forward() forward() ：載入歷史記錄中下一個(gè)歷史記錄的：載入歷史記錄中下一個(gè)

30、歷史記錄的URLURL地址地址go()go()：載入歷史記錄中任意歷史記錄的：載入歷史記錄中任意歷史記錄的URLURL地址。地址。有一個(gè)參數(shù)，代表載入歷史記錄列表中相對(duì)位置有一個(gè)參數(shù)，代表載入歷史記錄列表中相對(duì)位置的歷史記錄，例如的歷史記錄，例如go(-1)go(-1)那么代表載入前一條歷那么代表載入前一條歷史記錄，和史記錄，和back()back()方法的功能一致；方法的功能一致；go(1)go(1)代表載代表載入后一條歷史記錄，和入后一條歷史記錄，和forward()forward()方法的功能一致方法的功能一致。7.2 文檔對(duì)象模型NavigatorNavigator對(duì)象對(duì)象lNavig

31、ator對(duì)象中存儲(chǔ)著關(guān)于瀏覽器版本和瀏覽器運(yùn)行平臺(tái)的一些信息。l由于各種瀏覽器之間還存在著不完全兼容性，而且，用戶(hù)所使用的瀏覽器版本也有差異，所以，在建立網(wǎng)站的時(shí)候，有時(shí)候有必要建立多個(gè)不同版本的網(wǎng)頁(yè)，以適應(yīng)不同瀏覽器的需要，在這里就需要運(yùn)用Navigator對(duì)象進(jìn)行判斷。7.2 文檔對(duì)象模型NavigatorNavigator對(duì)象的屬性對(duì)象的屬性1 1appNameappName屬性。通過(guò)屬性。通過(guò)NavigatorNavigator對(duì)象的對(duì)象的appNameappName屬性屬性可以獲得瀏覽器的名稱(chēng)，例如，當(dāng)在可以獲得瀏覽器的名稱(chēng)，例如，當(dāng)在IEIE瀏覽器中瀏覽器中運(yùn)行腳本，獲得瀏覽器名稱(chēng)

32、為運(yùn)行腳本，獲得瀏覽器名稱(chēng)為Microsoft Microsoft Internet ExplorerInternet Explorer。appCodeNameappCodeName屬性。通過(guò)屬性。通過(guò)appCodeNameappCodeName屬性可以獲得屬性可以獲得瀏覽器代碼名稱(chēng)，對(duì)于瀏覽器代碼名稱(chēng)，對(duì)于IEIE瀏覽器，它的代碼名稱(chēng)瀏覽器，它的代碼名稱(chēng)為為MozillaMozillaappVersionappVersion屬性。通過(guò)屬性。通過(guò)appVersionappVersion屬性可以獲得瀏屬性可以獲得瀏覽器的版本信息以及瀏覽器運(yùn)行平臺(tái)的信息，例覽器的版本信息以及瀏覽器運(yùn)行平臺(tái)的信息，

33、例如，在下運(yùn)行的瀏覽器中，返回值為如，在下運(yùn)行的瀏覽器中，返回值為compatible;MSIE5.0;Windows NTcompatible;MSIE5.0;Windows NT。7.2 文檔對(duì)象模型NavigatorNavigator對(duì)象的屬性對(duì)象的屬性1 1userAgentuserAgent屬性。屬性。在在HTTPHTTP協(xié)議中，客戶(hù)端向效勞器端請(qǐng)求時(shí)，會(huì)發(fā)出協(xié)議中，客戶(hù)端向效勞器端請(qǐng)求時(shí)，會(huì)發(fā)出一段一段USER-AGENTUSER-AGENT信息，信息，NavigatorNavigator對(duì)象的對(duì)象的userAgentuserAgent屬性值就是屬性值就是USER-AGENTUSER-AGENT信息，可以獲信息，