DOM文檔對(duì)象模型

上傳人：2*** IP屬地：湖北上傳時(shí)間：2023-02-01 格式：PPT 頁(yè)數(shù)：80 大小：371.50KB 積分：28 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩75頁(yè)未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

DHTML及客戶端腳本

教師：黃強(qiáng)E_mail：hqgz@Tel述開(kāi)發(fā)網(wǎng)站不是僅僅去設(shè)計(jì)、制作網(wǎng)頁(yè)，如果只是制作網(wǎng)頁(yè)的話，我們完全可以使用所見(jiàn)即所得的網(wǎng)頁(yè)制作軟件，如：FrontPage、Dreamweaver等，而不用掌握超文本標(biāo)識(shí)語(yǔ)言、腳本語(yǔ)言之類的編程工具。雖說(shuō)FrontPage、Dreamweaver等均有網(wǎng)站開(kāi)發(fā)功能，但與語(yǔ)言相比其靈活性就差多了，另外它們生成的程序源代碼要復(fù)雜、冗長(zhǎng)的多。超文本標(biāo)識(shí)語(yǔ)言、腳本語(yǔ)言是網(wǎng)頁(yè)的基礎(chǔ)，是網(wǎng)站生長(zhǎng)的“土壤”，加上層疊樣式表以及可擴(kuò)展標(biāo)識(shí)語(yǔ)言等，可以使我們開(kāi)發(fā)出的網(wǎng)站形式更豐富、內(nèi)容更精彩。初識(shí)超文本標(biāo)識(shí)HTML超文本標(biāo)識(shí)語(yǔ)言(HyperTextMarkupLanguage，HTML)結(jié)構(gòu)簡(jiǎn)單，語(yǔ)法較松散，易學(xué)易用。它是一種文字處理語(yǔ)言，而不是“程序”語(yǔ)言。HTML的標(biāo)識(shí)嵌于文本格式的文檔中，用來(lái)控制文字、圖片等在瀏覽器中的表現(xiàn)，以及如何建立文件之間的鏈接。程序與之最大的不同，就是可用來(lái)控制操作系統(tǒng)或應(yīng)用程序執(zhí)行、并完成某項(xiàng)作業(yè)。使用超文本標(biāo)識(shí)語(yǔ)言“處理”過(guò)的文檔應(yīng)該滿足，不管在任何操作系統(tǒng)，任何瀏覽器上讀起來(lái)或看上去都是一樣的。超文本標(biāo)識(shí)語(yǔ)言最初用于發(fā)布信息，并沒(méi)有在網(wǎng)絡(luò)上使用。但它那極容易使用的顯著特點(diǎn)和隨著網(wǎng)絡(luò)帶寬的逐漸增加，人們便將其作為網(wǎng)絡(luò)上發(fā)布信息的首選語(yǔ)言。

例用超文本標(biāo)識(shí)語(yǔ)言書(shū)寫(xiě)一段實(shí)用程序(L4-1.htm)。<HTML><HEAD><TITLE>超文本標(biāo)識(shí)語(yǔ)言源程序</TITLE></HEAD><BODY>

<H2>物理學(xué)家霍金名言</H2><OL><LI>我的手指還能活動(dòng)，我的大腦還能思維；

<LI>我有終生追求的理想，有我愛(ài)和愛(ài)我的親人和朋友；

<LI>對(duì)了，我還有一顆感恩的心……

</OL>

<MARQUEEbgcolor="#87CEFA"width="80%">⒈我的手指還能活動(dòng)，我的大腦還能思維；</MARQUEE><MARQUEEbgcolor="#ADFF2F"behavior="alternate">⒉我有終生追求的理想，有我愛(ài)和愛(ài)我的親人和朋友；</MARQUEE><MARQUEEbgcolor="#FFB6C1"scrollamount="1">⒊對(duì)了，我還有一顆感恩的心……</MARQUEE></BODY></HTML>運(yùn)行結(jié)果：一般將HTML語(yǔ)言的文件分為三個(gè)部分，它們是：l

序(Prologue)l頭部(Head)l文件主體(Body)HTML語(yǔ)言文件的主要部分是頭部和文件主體。除了頭標(biāo)識(shí)和主體標(biāo)識(shí)外，就是附加標(biāo)識(shí)——序(HTML的版本聲明)，這種標(biāo)識(shí)放在HTML文檔的第一行，而一般的文檔中也許沒(méi)有。序是用來(lái)告知瀏覽器所遵循的HTML版本。HTML語(yǔ)言的基本結(jié)構(gòu)如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"><!序><HTML><!HTML文檔起始標(biāo)識(shí)><HEAD><!HTML的頭信息部分><TITLE><!HTML的標(biāo)題部分>HTML的基本結(jié)構(gòu)樣板</TITLE><!標(biāo)題結(jié)束標(biāo)識(shí)></HEAD><!頭信息結(jié)束標(biāo)識(shí)><BODY><!這里是HTML的正文部分>HTML文檔的基本結(jié)構(gòu)樣板，HTML的正文應(yīng)從這里開(kāi)始。</BODY><!正文部分結(jié)束標(biāo)識(shí)></HTML><!HTML文檔結(jié)束標(biāo)識(shí)>說(shuō)明：⑴HEAD標(biāo)識(shí)內(nèi)的信息一般不在瀏覽器的主窗口中顯示。⑵需要表示的內(nèi)容和描述內(nèi)容的標(biāo)識(shí)格式等，一般放在BODY標(biāo)識(shí)內(nèi)。⑶注釋有兩種方法：①<!注釋內(nèi)容>，“注釋內(nèi)容”中不可出現(xiàn)右尖括號(hào)，一般用于標(biāo)識(shí)里的內(nèi)容②，“注釋內(nèi)容”中可以出現(xiàn)包括尖括號(hào)在內(nèi)的任何括號(hào)，一般用于注釋大段的內(nèi)容。注意，本注釋僅用于注釋超文本標(biāo)識(shí)語(yǔ)言。⑷可以使用所有編輯純文本文件的軟件，或帶有HTML編輯器的軟件來(lái)編輯HTML，擴(kuò)展名必須寫(xiě)為.html或.htm。如：記事本、寫(xiě)字板、Word、FrontPage、Hotdog、Dreamweaver等。⑸“基本結(jié)構(gòu)樣板”在瀏覽器中顯示如圖4.2?；菊Z(yǔ)法超文本標(biāo)識(shí)語(yǔ)言HTML是標(biāo)識(shí)的集合，是標(biāo)準(zhǔn)通用標(biāo)識(shí)語(yǔ)言SGML的一個(gè)子集。被一對(duì)尖括號(hào)“<”和“>”括起來(lái)，標(biāo)識(shí)一般成對(duì)出現(xiàn)。如“基本結(jié)構(gòu)樣板”中的<HEAD>和</HEAD>，<HEAD>為起始標(biāo)識(shí)，加斜線的<HEAD>即</HEAD>，為結(jié)束標(biāo)識(shí)。

標(biāo)識(shí)(Tags)和屬性(Attributes)構(gòu)建了HTML的語(yǔ)法。瀏覽器只要讀到HTML的標(biāo)識(shí)和屬性，就會(huì)將其解釋成網(wǎng)頁(yè)或網(wǎng)頁(yè)的某個(gè)組成部分，它們的基本構(gòu)成如下：

⑴標(biāo)識(shí)：標(biāo)識(shí)就是給文檔中某些具有特殊含義的部分作標(biāo)記的過(guò)程，標(biāo)識(shí)的符號(hào)(如：<BR>、<LI>、<H2>等等，常簡(jiǎn)稱標(biāo)識(shí)或標(biāo)記)是該過(guò)程的具體實(shí)現(xiàn)。⑵屬性：屬性是存儲(chǔ)屬性值的變量。例句：⑶值：屬性通常含有一個(gè)值(Value)，該值應(yīng)在規(guī)定的范圍內(nèi)選取。⑷嵌套標(biāo)識(shí)：在不同的網(wǎng)頁(yè)版式設(shè)計(jì)中，可以使用一個(gè)以上的標(biāo)識(shí)來(lái)表示頁(yè)面的數(shù)據(jù)，例如：設(shè)置一個(gè)文本字串為：標(biāo)題1、斜體，可以使用標(biāo)識(shí)<H1>和<I>，例句如下：

<H1><I>岳陽(yáng)樓記</I></H1>注意標(biāo)識(shí)嵌套時(shí)的順序不應(yīng)交叉，下句則不對(duì)：

<H1><I>岳陽(yáng)樓記</H1></I>從語(yǔ)法上來(lái)說(shuō)該句是不對(duì)的，但I(xiàn)E和Netscape瀏覽器仍能正確識(shí)別和顯示，即瀏覽器一般總能最大限度地容忍錯(cuò)誤。不提倡使用嵌套標(biāo)識(shí)。

⑸空格符：HTML標(biāo)識(shí)間多余的空格符或回車(chē)符瀏覽器是不理會(huì)的。

⑹特殊字符：在HTML語(yǔ)言中定義了一些用戶不能直接從鍵盤(pán)輸入的特殊字符，如：字符（&）、雙引號(hào)(“”)、小于(<)、大于(>)、空格符等，它們不能直接用于HTML文檔在瀏覽器中顯示。

常用標(biāo)識(shí)1.基本標(biāo)識(shí)(BasicTags)⑴<HTML></HTML>定義超文本文檔，描述Web頁(yè)面的起始與終止；⑵<HEAD></HEAD>設(shè)置頁(yè)面的頭標(biāo)部分，用來(lái)包含當(dāng)前文檔的一些相關(guān)信息。如定義樣式、網(wǎng)頁(yè)的標(biāo)題、網(wǎng)頁(yè)中使用的腳本語(yǔ)言以及對(duì)搜索引擎有幫助的關(guān)鍵詞；⑶<TITLE></TITLE>HTML文檔均應(yīng)該包含<TITLE>標(biāo)識(shí)，用來(lái)指明文件的標(biāo)題。其內(nèi)容將顯示在瀏覽器的標(biāo)題欄內(nèi)，設(shè)置它的最大好處，是為搜索引擎提供搜索關(guān)鍵詞；⑷<BODY></BODY>放置Web頁(yè)面的正文內(nèi)容，包含文件內(nèi)的文字、超級(jí)鏈接文字的顏色、背景色彩、圖片、動(dòng)畫(huà)、影像、音效等，幾乎所有對(duì)網(wǎng)頁(yè)的展示功能；⑸<META>用來(lái)介紹與文件內(nèi)容相關(guān)的信息。每一個(gè)<META>標(biāo)識(shí)用于指明一個(gè)名稱或數(shù)值對(duì)，常常放在頭標(biāo)識(shí)中；⑹<BASEhref=“URL”>設(shè)置連接的基準(zhǔn)路徑，該標(biāo)識(shí)可以大大簡(jiǎn)化網(wǎng)頁(yè)內(nèi)超鏈接的全路徑，這里只要給出相對(duì)于Base原指定的基準(zhǔn)地址的相對(duì)路徑即可。<BASE>為單標(biāo)識(shí)，通常放在<HEAD>區(qū)內(nèi)。2.文本、字符格式(Text&CharFormat)

⑴<Hn>標(biāo)題文字(n=1～6)；⑵<BR>換行標(biāo)識(shí)，單標(biāo)識(shí)；⑶<P></P>定義段落（分段），常用雙標(biāo)識(shí)，也可用單個(gè)標(biāo)識(shí)；⑷<PRE></PRE>在<PRE></PRE>之間的內(nèi)容將以預(yù)格式化的文本方式顯示，包括回車(chē)換行以及跳格等；⑸<HR>可以作為文本與文本之間的分界標(biāo)識(shí)，通常是一個(gè)全寬的水平線；⑹字符格式；⑺字體。3.列表標(biāo)識(shí)(Lists)⑴定義列表(DefinitionList)；<DL></DL>設(shè)定定義列表的標(biāo)識(shí)<DT>設(shè)定定義列表的項(xiàng)目<DD>設(shè)定定義列表的項(xiàng)目說(shuō)明<DLcompact>設(shè)定緊密排列的定義列表⑵無(wú)序號(hào)列表(UnorderedList)；<UL><LI>步驟一<LI>步驟二<P>下一階段<LI>步驟三</UL>

⑶有序號(hào)列表(OrderedList)。<OL><LI>過(guò)程一<LI>過(guò)程二<OL><LI>子過(guò)程A<LI>子過(guò)程B</OL><LI>過(guò)程三</OL>

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(DocumentObjectMode)，改變網(wǎng)頁(yè)的編程語(yǔ)言（JavaScript，VBScript）。基于HTML語(yǔ)言，利用CSS擴(kuò)展樣式編排，借助瀏覽器對(duì)象模型概念，以腳本程序?qū)W(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)控制文件對(duì)象模型DOM(DocumentObjectModel)其核心是將網(wǎng)頁(yè)內(nèi)容都作為對(duì)象。只要為HTML中的標(biāo)記設(shè)定一個(gè)標(biāo)識(shí)符(ID)，就可將所標(biāo)識(shí)的內(nèi)容作為對(duì)象在腳本程序中使用。傳統(tǒng)的HTML是靜態(tài)的，當(dāng)它被加載到瀏覽器以后，無(wú)法變化DHTML-當(dāng)服務(wù)器把頁(yè)面?zhèn)魉徒o瀏覽器后，頁(yè)面還可以變化DOM（文檔對(duì)象模型）：工作原理：DHTML查閱文檔的一種方法，當(dāng)頁(yè)面被加載時(shí)，建立起數(shù)據(jù)庫(kù)控制元素的方法：使用腳本語(yǔ)言來(lái)完成DHTML與服務(wù)器無(wú)關(guān)DOM技術(shù)DOM概述一個(gè)跨平臺(tái)的、可適應(yīng)不同程序語(yǔ)言的文件對(duì)象模型；它采取直觀且一致的方式，將HTML或XML文檔進(jìn)行模型化處理；提供存取和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的編程接口。將文檔作為一個(gè)樹(shù)形（Tree）結(jié)構(gòu)，樹(shù)的每個(gè)節(jié)點(diǎn)表現(xiàn)為一個(gè)HTML標(biāo)記或者HTML標(biāo)記內(nèi)的文本項(xiàng)。以下是一個(gè)產(chǎn)生表格的HTML文件。<table><tbody><tr><td>商品類別</td><td>數(shù)量</td> </tr><tr><td>日用百貨</td><td>10</td></tr><tr><td>電器</td> <td>20</td></tr></tbody></table>文檔與DOM關(guān)系示例HTML文件的DOM節(jié)點(diǎn)樹(shù)

<tbody><tr><tr><tr><td><td><td><td><td><td>商品類別數(shù)量日用百貨10電器20<table>DOM樹(shù)型結(jié)構(gòu)節(jié)點(diǎn)的屬性屬性訪問(wèn)說(shuō)明nodeName只讀返回節(jié)點(diǎn)的標(biāo)記名。nodeType只讀返回節(jié)點(diǎn)的類型：1—標(biāo)記，2—屬性，3—文字節(jié)點(diǎn)。firstChild只讀返回第一個(gè)子節(jié)點(diǎn)的對(duì)象集合。lastChild只讀返回最后一個(gè)子節(jié)點(diǎn)的對(duì)象集合。parentNode只讀返回父節(jié)點(diǎn)對(duì)象。previousSibling只讀返回左兄弟節(jié)點(diǎn)對(duì)象。nextSibling只讀返回右兄弟節(jié)點(diǎn)對(duì)象。data讀寫(xiě)文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回undefined。nodeValue讀寫(xiě)文字節(jié)點(diǎn)的內(nèi)容，其他節(jié)點(diǎn)返回null。DOM中的2個(gè)對(duì)象集合：attributes：節(jié)點(diǎn)內(nèi)容的對(duì)象集合；childNodes：子節(jié)點(diǎn)的對(duì)象集合。DOM樹(shù)型結(jié)構(gòu)節(jié)點(diǎn)的屬性（續(xù)）DOM的方法使用DOM的方法生成一個(gè)表格<html><head><title>使用DOM生成表格</title><scriptlanguage="JavaScript">functiongenTable(pNode){vari,j;varcontents=newArray(3);for(i=0;i<3;i++)contents[i]=newArray(2);contents[0][0]="商品類別";contents[0][1]="數(shù)量";contents[1][0]="日用百貨";contents[1][1]="10";contents[2][0]="電器";contents[2][1]="20";（續(xù)）vartableNode=document.createElement("TABLE");vartBodyNode=document.createElement("TBODY");for(i=0;i<3;i++){t1=document.createElement("TR");tBodyNode.appendChild(t1);for(j=0;j<2;j++){t1=document.createElement("TD");t2=document.createTextNode(contents[i][j]);t1.appendChild(t2);tBodyNode.childNodes[i].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ǔ)言寫(xiě)的DOM程序，它的源程序可以跨平臺(tái)兼容，但是DOM并沒(méi)有定義任何二進(jìn)制互操作的形式。DOM不是堅(jiān)持把對(duì)象放到XML或HTML的方式。DOM規(guī)定了XML和HTML文檔如何以對(duì)象形式表示，從而它們可以用在面向?qū)ο蟮某绦蛑?。DOM不是一套數(shù)據(jù)結(jié)構(gòu)，而是規(guī)定接口的對(duì)象模型。雖然文檔包含了顯示parent/child關(guān)系的示意圖，但這些只是由編程接口定義的邏輯關(guān)系，并不是任何特殊的內(nèi)部數(shù)據(jù)結(jié)構(gòu)的表示。

理解DOM（續(xù)）DOM并沒(méi)有定義XML或HTML的“真正內(nèi)部語(yǔ)義”。這些語(yǔ)言的語(yǔ)義是由W3C推薦的。DOM是被設(shè)計(jì)為尊重這些語(yǔ)義的編程模型。任何用這些語(yǔ)言寫(xiě)的文檔可用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ǔ)言如Java或ECMAScript。DOM最初的產(chǎn)生是作為允許JavaScriptscripts和Javaprograms在Webbrowsers間進(jìn)行移植的規(guī)范。

CSS及CSS-PCascadingStyleSheets（層疊樣式表）的縮寫(xiě)1996年底的時(shí)候悄悄誕生了一種叫做樣式表（stylesheets）的技術(shù)。將對(duì)布局、字體、顏色、背景和其它文圖效果實(shí)現(xiàn)更加精確的控制。--只通過(guò)修改一個(gè)文件就改變頁(yè)數(shù)不定的網(wǎng)頁(yè)的外觀和格式。--在所有瀏覽器和平臺(tái)之間的兼容性。--更少的編碼、更少的頁(yè)數(shù)和更快的下載速度。CSS所能改變的性質(zhì)

字體

文字間的空間

列表顏色

背景

Margin

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

ImageLinkButtonHiddenRadioSelectTextTextareaCheckboxPasswordResetSubmitNavigator對(duì)象主要用途用于判別客戶瀏覽器的有關(guān)信息，以便針對(duì)不同瀏覽器的特性而設(shè)計(jì)不同的顯示屬性或方法名含義appName以字符串形式表示的瀏覽器名稱。appVersion以字符串形式表示的瀏覽器版本信息，包括瀏覽器的版本號(hào)、操作系統(tǒng)名稱等。appCodeName以字符串形式表示的瀏覽器代碼名字，通常值為Mozilla。userAgent以字符串表示的完整的瀏覽器版本信息，包括了appName、appVersion和appCodeName的信息。mimeType在瀏覽器中可以使用的mime類型。plugins在瀏覽器中可以使用的插件(1)。javaEnabled()返回邏輯值，表示客戶瀏覽器可否使用Java。（1）與窗口有關(guān)的屬性(Window對(duì)象的實(shí)例)window、self：當(dāng)前窗口；parent：當(dāng)前窗口或幀（frame）的父窗口；

top：主窗口，是所有下級(jí)窗口的父窗口。*注意：引用時(shí)在它們的名稱之前不能加上對(duì)象名（2）與瀏覽器狀態(tài)欄有關(guān)的屬性

status：瀏覽器當(dāng)前狀態(tài)欄顯示的內(nèi)容；

defaultStatus：瀏覽器狀態(tài)欄顯示的默認(rèn)值

alert(字符串)：參數(shù)字符串為顯示于對(duì)話框中的內(nèi)容，無(wú)返回值。confirm(字符串)：參數(shù)字符串為顯示于對(duì)話框中的內(nèi)容，若用戶按下“確定”按鈕，返回true，否則返回mpt(字符串1,字符串2)：字符串1為顯示于對(duì)話框中的內(nèi)容，參數(shù)字符串2為輸入的缺省內(nèi)容；如用戶按下“確定”按鈕，返回用戶在輸入框中輸入的字符串；否則，返回null。3.Window對(duì)象（續(xù)）（4）與窗口生成與撤消有關(guān)的方法生成一個(gè)新窗口open("URL","WindowName"[,"WindowFeatures"])

參數(shù)：URL：在新生成的窗口中載入的頁(yè)面；

WindowName：新窗口的名字；WindowFeatures：表示新窗口的外觀特征，可以指定多個(gè)特征值，各特征值之間以”,”相隔：特征值格式為：特征名=值返回：指向新窗口的指針關(guān)閉一個(gè)窗口：close()3.Window對(duì)象（續(xù)）窗口特征值表

time：重新執(zhí)行expression的時(shí)間間隔,單位是毫秒.返回：一個(gè)標(biāo)志，用以指示這個(gè)“超時(shí)”設(shè)置。清除指定的超時(shí)設(shè)置：clearTimeout(timeId)參數(shù)：timeID：由setTimeout返回的標(biāo)志3.Window對(duì)象（續(xù)）VBScript的IE瀏覽器對(duì)象結(jié)構(gòu)historynavigatorlocationeventscreenframedocumentdocumentdocumentWindow依次顯示HTML文件中的各標(biāo)記<html><head><title>顯示文件中的各個(gè)標(biāo)記</title><style> body{font-size:22px}</style></head><bodytopmargin=20><center><h1>依次顯示文件中的各個(gè)標(biāo)記</h1></center><hr><scriptlanguage=VBScript>Document.write"<br>"Fori=0toDocument.all.length-1Document.write" "&Document.all(i).tagName&"<br>"Next</script></body></html>（5）Document的對(duì)象數(shù)組（續(xù)）stylesheets：所有樣式屬性對(duì)象。屬性：length方法：item()StyleSheet對(duì)象的主要方法：Document.StyleSheets(索引).addRule“標(biāo)記名”,“樣式規(guī)則”,“樣式項(xiàng)目索引”Document.StyleSheets(索引).RemoveRule“樣式項(xiàng)目索引”tagName屬性InnerHTML屬性style對(duì)象的屬性屬性設(shè)置格式：元素id.style.樣式屬性名＝屬性的某值標(biāo)記的屬性輸出/輸入JavaScript的document對(duì)象提供了顯示、消除、打開(kāi)、關(guān)閉HTML頁(yè)面信息的輸出流，同時(shí)，JavaScript也可以使用Window對(duì)象的三個(gè)方法alert、confirm和prompt輸出信息或數(shù)據(jù)，請(qǐng)見(jiàn)例5.26中的應(yīng)用，方法的參數(shù)詳情可參閱5.2.5節(jié)，與VBScript的方法類似，但要注意字母的大小寫(xiě)。

5.3.2注釋與續(xù)行符JavaScript也有兩種形式的注釋：l

//注釋內(nèi)容l

/*…注釋內(nèi)容…*/JavaScript的過(guò)程和其他高級(jí)語(yǔ)言類似，JavaScript的函數(shù)也是一個(gè)擁有獨(dú)立名字(在程序中惟一)的一系列JavaScript語(yǔ)句的有機(jī)組合。一個(gè)函數(shù)可以有自己的并可以在函數(shù)體內(nèi)使用的參數(shù)。它的另一個(gè)作用是將JavaScript語(yǔ)句同Web頁(yè)面相連接，任何一個(gè)用戶的交互動(dòng)作都可能引發(fā)一個(gè)事件，即間接地引起一個(gè)函數(shù)的調(diào)用，這樣的調(diào)用又稱事件處理(參見(jiàn)5.3.4節(jié))。使用函數(shù)完成項(xiàng)目有一些好處：l

放在一個(gè)函數(shù)中的代碼在程序中可以反復(fù)調(diào)用；l

用不同的函數(shù)來(lái)完成不同的功能，以函數(shù)來(lái)構(gòu)造項(xiàng)目，可以使程序的結(jié)構(gòu)清晰；l

可以將語(yǔ)句組成一個(gè)事件處理函數(shù)，并提供事件處理句柄供其他語(yǔ)句觸發(fā)。⒈自定義函數(shù)⒉內(nèi)置函數(shù)JavaScript的事件事件定義了用戶與Web頁(yè)面交互時(shí)產(chǎn)生的各種操作。瀏覽器在程序運(yùn)行的大部分時(shí)間都等待交互事件的發(fā)生，并在事件發(fā)生時(shí)，自動(dòng)調(diào)用事件處理函數(shù)，完成事件處理過(guò)程。如果在JavaScript腳本程序中注冊(cè)一個(gè)事件處理函數(shù)，瀏覽器便可以在裝入該頁(yè)面時(shí)自動(dòng)地執(zhí)行這個(gè)函數(shù)。

例：<INPUTtype="button"value="執(zhí)行"onclick="compute1(this.form)">⒈鼠標(biāo)事件⒉鍵盤(pán)事件⒊瀏覽器事件⑴Load事件(發(fā)生在瀏覽器完成一個(gè)窗口或一組框架的裝載之后)⑵Unload事件(發(fā)生在本瀏覽器載入一個(gè)新的網(wǎng)頁(yè)之前，即離開(kāi)本網(wǎng)頁(yè)后)⑶dragdrop事件(發(fā)生在拖放一個(gè)對(duì)象到瀏覽器窗口中，IE不支持)⑷Submit事件(發(fā)生在完成信息輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí))

JavaScript的對(duì)象JavaScript實(shí)際上不完全支持面向?qū)ο蟮某绦蛟O(shè)計(jì)，只是一種基于對(duì)象的腳本語(yǔ)言。它支持開(kāi)發(fā)對(duì)象類型以及根據(jù)這些對(duì)象產(chǎn)生一定數(shù)量的對(duì)象實(shí)例。同時(shí)它還支持開(kāi)發(fā)對(duì)象的可重用性，以便實(shí)現(xiàn)一次開(kāi)發(fā)多次使用的目的。1.內(nèi)置對(duì)象①

Array對(duì)象(提供一個(gè)數(shù)組的模型，存儲(chǔ)大量有序的數(shù)據(jù))②

Date對(duì)象(處理日期和時(shí)間的存儲(chǔ)、轉(zhuǎn)化和表達(dá))③

Event對(duì)象(提供對(duì)JavaScript事件的各種處理信息)④

Math對(duì)象(處理所有的數(shù)學(xué)運(yùn)算)⑤

String對(duì)象(處理所有的字符串操作)

⒉

瀏覽器對(duì)象①anchors對(duì)象(為處理錨提供屬性和方法)②document對(duì)象(提供對(duì)頁(yè)面各種特性的設(shè)置)③forms對(duì)象(為處理表單或界面對(duì)象提供屬性和方法)④frame對(duì)象(提供對(duì)框架特性的設(shè)置)⑤history對(duì)象(提供已訪問(wèn)過(guò)網(wǎng)頁(yè)的URL地址)⑥links對(duì)象(為處理超鏈接提供屬性和方法)⑦

location對(duì)象(給出當(dāng)前網(wǎng)頁(yè)的URL地址)⑧

navigation對(duì)象(提供瀏覽器版本號(hào)、運(yùn)行平臺(tái)、瀏覽器使用語(yǔ)言等)⑨

window對(duì)象(是腳本對(duì)象層次的最高層，代表著一個(gè)瀏覽器窗口)JavaScript的對(duì)象3.

對(duì)象創(chuàng)建在JavaScript中除了使用系統(tǒng)的對(duì)象以外，用戶還可以創(chuàng)建自己的對(duì)象，其方法是創(chuàng)建一個(gè)構(gòu)造函數(shù)：①定義一個(gè)構(gòu)造函數(shù)用來(lái)說(shuō)明這個(gè)對(duì)象的各種屬性，并可對(duì)各屬性初始化；②創(chuàng)建對(duì)象需要的各種方法，并在對(duì)象上注冊(cè)這些方法；③使用new語(yǔ)句創(chuàng)建一個(gè)該對(duì)象的對(duì)象實(shí)例。例如：functionobjectName(property1,property2,…,propertyN){this.Property1=property1;perty2=property2;…pertyN=propertyN;this.registerMethod=registerMethod}//注冊(cè)函數(shù)registerMethod注意，函數(shù)registerMethod必須事先已定義，作為對(duì)象的方法在此注冊(cè)XSLTXSLT是ExtensibleStylesheetLanguageTransformations的縮寫(xiě)XSLT轉(zhuǎn)換XML文檔到其他通常使用的格式，一般是HTML文檔XSLT使用兩種文件(usestwoinputfiles:)XML文檔包含實(shí)際的數(shù)據(jù)XSL文檔包含顯示框架（boththe“framework”inwhichtoinsertthedata,andXSLTcommandstodoso）很簡(jiǎn)單的例子文件data.xml:<?xmlversion="1.0"?>

<?xml-stylesheettype="text/xsl"href="render.xsl"?>

<message>Howdy!</message>

文件render.xsl:<?xmlversion="1.0"?>

<xsl:stylesheetversion="1.0”

xmlns:xsl="/1999/XSL/Transform">

<xsl:templatematch="/">

</body></html>

</xsl:template>

</xsl:stylesheet>.xsl文件一個(gè)XSLT文檔使用.xsl作為文件后綴名XSLT文檔使用以下的文件頭:<?xmlversion="1.0"?><xsl:stylesheetversion="1.0"

xmlns:xsl="/1999/

XSL/Transform">包含一個(gè)或更多的templates,例如:<xsl:templatematch="/">...</xsl:template>使用下列語(yǔ)句來(lái)結(jié)束:</xsl:stylesheet>查找message文本Thetemplate<xsl:templatematch="/">saystoselecttheentirefileYoucanthinkofthisasselectingtherootnodeoftheXMLtreeInsidethistemplate,

<xsl:value-ofselect="message"/>selectsthemessagechildAlternativeXpathexpressionsthatwouldalsowork:

./message/message/text()(text()isanXPathfunction)./message/text()文件解讀TheXSLwas:

<xsl:templatematch="/">

</body></html>

</xsl:template>

<xsl:templatematch=“/”>選擇根節(jié)點(diǎn)

<h1>被寫(xiě)到輸出文檔Message的內(nèi)容被寫(xiě)到輸出文檔中

</h1></body></html>被寫(xiě)到輸出文檔

Theresultantfilelookslike:

<h1>Howdy!</h1>

</body></html>XSLT如何工作XML文檔被讀入并存儲(chǔ)為一棵節(jié)點(diǎn)樹(shù)（isreadinandstoredasatreeofnodes）The<xsl:templatematch="/">templateisusedtoselecttheentiretreeTherules（規(guī)則）withinthetemplate（模版）areappliedtothematching（匹配）nodes,thuschangingthestructureoftheXMLtreeIfthereareothertemplates,theymustbecalledexplicitly（明確地）fromthemaintemplateUnmatchedpartsoftheXMLtreearenotchangedAfterthetemplateisapplied（應(yīng)用）,thetreeiswrittenoutagainasatextdocumentXSLT應(yīng)用范圍使用適合的程序例如Xerces,XSLT能被用于閱讀或?qū)懳臋nWEB應(yīng)用服務(wù)器能使用XSLT在服務(wù)器端轉(zhuǎn)換XML文檔到HTML文檔并送到客戶端AmodernbrowsercanuseXSLTtochangeXMLintoHTMLontheclientsideThisiswhatwewillmostlybedoinginthisclassMostusersseldomupdatetheirbrowsersIfyouwant“everyone”toseeyourpages,doanyXSLprocessingontheserversideOtherwise,thinkaboutwhatbestfitsyoursituationModernbrowsersInternetExplorer6bestsupportsXMLNetscape6supportssomeofXMLInternetExplorer5.xsupportsanobsolete（過(guò)時(shí)的）versionofXMLIE5isnotgoodenoughforthiscourseIfyoumustuseIE5,theinitialPIisdifferent(youcanlookitupifyoueverneedit)xsl:value-of<xsl:value-ofselect=“XPathexpression”/>選擇一個(gè)節(jié)點(diǎn)的內(nèi)容并達(dá)到輸出流中（selectsthecontentsofanelementandaddsittotheoutputstream）Theselectattribute（屬性）isrequiredNoticethatxsl:value-ofisnotacontainer（容器）,henceitneedstoendwithaslash（/反斜杠）

Example(前面有的):<h1><xsl:value-ofselect="message"/></h1>xsl:for-eachxsl:for-eachisakindofloopstatement（循環(huán)語(yǔ)句）Thesyntax（語(yǔ)法）is

<xsl:for-eachselect="XPathexpression">

Texttoinsertandrulestoapply

</xsl:for-each>Example:toselecteverybook(//book)andmakeanunorderedlist(<ul>)oftheirtitles(title),use:

<ul>

<xsl:for-eachselect="http://book">

</xsl:for-each>

</ul>過(guò)濾輸出Youcanfilter(restrict)outputbyaddingacriteriontotheselectattribute’svalue:

<ul>

<xsl:for-eachselect="http://book">

<li>

<xsl:value-of

select="title[../author='TerryPratchett']"/>

</li>

</xsl:for-each>

</ul>這段代碼將輸出作者是TerryPratchett的書(shū)名Filter（過(guò)濾器）detailsHereisthefilterwejustused:

<xsl:value-of

select="title[../author='TerryPratchett'"]/>authorisasibling（兄弟,姐妹,同胞,同屬）oftitle,sofromtitlewehavetogouptoitsparent,book,thenbackdowntoauthorThisfilterrequiresaquote（引號(hào)）withinaquote,soweneedbothsinglequotesanddoublequotesLegalfilteroperatorsare:

=等于!=不等于<小于>大于Numbersshouldbequoted（被引號(hào)引起來(lái)）,butapparentlydon’thavetobe但是它不是我們需要的形式Here’swhatwedid:

<xsl:for-eachselect="http://book">

<li>

<xsl:value-of

select="title[../author='TerryPratchett']"/>

</li>

</xsl:for-each>這段代碼將所有的書(shū)都包含在<li>and</li>，所以除了TerryPratchett外其他書(shū)名都是空白Thereisnoobvious（明顯）waytosolve（解決）thiswithjustxsl:value-ofxsl:ifxsl:ifallowsustoincludecontentifagivencondition(inthetestattribute)istrueExample:

<xsl:for-eachselect="http://book">

<xsl:iftest="author='TerryPratchett'">

<li>

<xsl:value-ofselect="title"/>

</li>

</xsl:if>

</xsl:for-each>Thisdoesworkcorrectly!xsl:choose語(yǔ)句Thexsl:choose...xsl:when...xsl:otherwiseconstruct（結(jié)構(gòu)）isXML’sequivalent（相等的）ofJava’sswitch...case...defaultstatement（語(yǔ)句）Thesyntaxis:

<xsl:choose>

<xsl:whentest="somecondition">

...somecode...

</xsl:when>

<xsl:otherwise>

...somecode...

</xsl:otherwise>

</xsl:choose>?xsl:chooseisoften

usedwithinan

xsl:for-eachloopxsl:sortYoucanplace（放置）anxsl:sortinside（在內(nèi)部）anxsl:for-eachTheattributeofthesorttellswhatfieldtosort（索引）onExample:

<ul>

<xsl:for-eachselect="http://book">

<xsl:sortselect="author"/>

<li><xsl:value-ofselect="title"/>by

<xsl:value-ofselect="author"></li>

</xsl:for-each>

</ul>這個(gè)例子建立了一個(gè)列表包含titlesandauthors,使用author排序。xsl:text<xsl:text>...</xsl:text>helpsdealwith（處理）twocommonproblems:XSLisn’tverycarefulwithwhitespace（空白）inthedocumentThisdoesn’tmattermuchforHTML,whichcollapses（忽視）allwhitespaceanyway(thoughtheHTMLsourcemaylookugly（丑陋）)<xsl:text>givesyoumuchbettercontroloverwhitespace;itactslikethe<pre>elementinHTMLSinceXMLdefinesonlyfiveentities,youcannotreadilyputotherentities(suchas

)inyourXSL 

almostworks,but

isvisibleonthepageHere’sthesecretformulaforentities:<xsl:textdisable-output-escaping="yes"> </xsl:text>從XML數(shù)據(jù)文件中創(chuàng)建屬性（tag）假設(shè)XML中包含

<name>Dr.Dave'sHomePage</name>

<url>/~matuszek</url>你想變成下列HTML代碼

<ahref="/~matuszek">

Dr.Dave'sHomePage</a>WeneedadditionaltoolstodothisItdoesn’tevenhelpiftheXMLdirectlycontains

<ahref="/~matuszek">

Dr.Dave'sHomePage</a>--westillcan’tmoveittotheoutputThesameproblemoccurswithimagesintheXML創(chuàng)建超鏈接（1）假設(shè)XMLcontains（包含）

<name>Dr.Dave'sHomePage</name>

<url>/~matuszek</url><xsl:attributename=“...”>

addsthenamedattributetotheenclosingtag（封閉的標(biāo)記中）Thevalueoftheattributeisthecontentofthistag示例代碼:<a>

<xsl:attributename="href">

<xsl:value-ofselect="url"/>

</xsl:attribute>

<xsl:value-ofselect="name"/>

</a>結(jié)果:<ahref="/~matuszek">

Dr.Dave'sHomePage</a>創(chuàng)建超鏈接（2）假設(shè)XMLcontains（包含）

<name>Dr.Dave'sHomePage</name>

<url>/~matuszek</url>Anattributevaluetemplate(AVT)consistsofbraces{}

insidetheattributevalueThecontentofthebracesisreplacedbyitsvalue示例代碼<ahref="{url}">

<xsl:value-ofselect="name"/>

</a>結(jié)果:<ahref="/~matuszek">

Dr.Dave'sHomePage</a>模塊化Modularization（模塊化）--breakingupacomplexprogramintosimplerparts—是一種重要的編程思想Inprogramminglanguagesmodularizationisoftendonewithfunctions（函數(shù)，結(jié)構(gòu)化編程）ormethods（方法，面向?qū)ο缶幊蹋㊣nXSLwecandosomethingsimilarwith

xsl:apply-templatesForexample,supposewehaveaDTDforbookwithpartstitlePage,tableOfContents,chapter,andindexWecancreateseparatetemplatesforeachofthesepartsBookexample<xsl:templatematch="/">

<xsl:apply-templates/>

</body></html>

</xsl:template>

<xsl:templatematch="tableOfContents">

<h1>TableofContents</h1>

<xsl:apply-templatesselect="chapterNumber"/>

<xsl:apply-templatesselect="chapterName"/>

<xsl:apply-templatesselect="pageNumber"/>

</xsl:template>Etc.xsl:apply-templates元素The<xsl:apply-templates>elementapplies（應(yīng)用）atemplaterule（規(guī)則）tothecurrentelementortothecurrentelement’schildnodesIfweaddaselectattribute,itappliesthetemplateruleonlytothechildthatmatchesIfwehavemultiple<xsl:apply-templates>elementswithselectattributes,thechildnodesareprocessedinthesameorderasthe<xsl:apply-templates>elements（按順序應(yīng)用規(guī)則）當(dāng)templates被忽視Templatesaren’tusedunlesstheyareapplied例

人人文庫(kù)> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

DOM文檔對(duì)象模型

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

DOM文檔對(duì)象模型

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔