DOM文檔對象模型

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

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

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

文檔簡介

DHTML及客戶端腳本

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

例用超文本標識語言書寫一段實用程序(L4-1.htm)。<HTML><HEAD><TITLE>超文本標識語言源程序</TITLE></HEAD><BODY>

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

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

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

</OL>

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

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

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

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

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

<H1><I>岳陽樓記</H1></I>從語法上來說該句是不對的，但IE和Netscape瀏覽器仍能正確識別和顯示，即瀏覽器一般總能最大限度地容忍錯誤。不提倡使用嵌套標識。

⑸空格符：HTML標識間多余的空格符或回車符瀏覽器是不理會的。

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

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

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

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

DHTML的概念

動態(tài)HTML就是一種即使在網(wǎng)頁下載進瀏覽器以后，網(wǎng)頁中元素的位置、外觀、內(nèi)容仍然能夠隨時變換，這樣的HTML，我們稱之為DHTML。動態(tài)HTML（簡稱為DHTML）是近年來網(wǎng)絡(luò)發(fā)展進程中最振奮人心也最具實用性的創(chuàng)新之一。它的實現(xiàn)需要幾種技術(shù)的綜合。（當然，不同的瀏覽器，實現(xiàn)的程度也不同），這些技術(shù)包括CSS,DOM(DocumentObjectMode)，改變網(wǎng)頁的編程語言（JavaScript，VBScript）。基于HTML語言，利用CSS擴展樣式編排，借助瀏覽器對象模型概念，以腳本程序?qū)W(wǎng)頁進行動態(tài)控制文件對象模型DOM(DocumentObjectModel)其核心是將網(wǎng)頁內(nèi)容都作為對象。只要為HTML中的標記設(shè)定一個標識符(ID)，就可將所標識的內(nèi)容作為對象在腳本程序中使用。傳統(tǒng)的HTML是靜態(tài)的，當它被加載到瀏覽器以后，無法變化DHTML-當服務(wù)器把頁面?zhèn)魉徒o瀏覽器后，頁面還可以變化DOM（文檔對象模型）：工作原理：DHTML查閱文檔的一種方法，當頁面被加載時，建立起數(shù)據(jù)庫控制元素的方法：使用腳本語言來完成DHTML與服務(wù)器無關(guān)DOM技術(shù)DOM概述一個跨平臺的、可適應(yīng)不同程序語言的文件對象模型；它采取直觀且一致的方式，將HTML或XML文檔進行模型化處理；提供存取和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的編程接口。將文檔作為一個樹形（Tree）結(jié)構(gòu)，樹的每個節(jié)點表現(xiàn)為一個HTML標記或者HTML標記內(nèi)的文本項。以下是一個產(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é)點樹

<tbody><tr><tr><tr><td><td><td><td><td><td>商品類別數(shù)量日用百貨10電器20<table>DOM樹型結(jié)構(gòu)節(jié)點的屬性屬性訪問說明nodeName只讀返回節(jié)點的標記名。nodeType只讀返回節(jié)點的類型：1—標記，2—屬性，3—文字節(jié)點。firstChild只讀返回第一個子節(jié)點的對象集合。lastChild只讀返回最后一個子節(jié)點的對象集合。parentNode只讀返回父節(jié)點對象。previousSibling只讀返回左兄弟節(jié)點對象。nextSibling只讀返回右兄弟節(jié)點對象。data讀寫文字節(jié)點的內(nèi)容，其他節(jié)點返回undefined。nodeValue讀寫文字節(jié)點的內(nèi)容，其他節(jié)點返回null。DOM中的2個對象集合：attributes：節(jié)點內(nèi)容的對象集合；childNodes：子節(jié)點的對象集合。DOM樹型結(jié)構(gòu)節(jié)點的屬性（續(xù)）DOM的方法使用DOM的方法生成一個表格<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是動態(tài)HTML的真正核心內(nèi)容。文檔對象模型是HTML和XML的應(yīng)用編程接口。它定義了文檔的邏輯結(jié)構(gòu)和訪問文檔的途徑。DOM是為文檔的編程API，它非常接近它模型化的文檔結(jié)構(gòu)理解DOM

DOM不是一個二進制的規(guī)范，用相同語言寫的DOM程序，它的源程序可以跨平臺兼容，但是DOM并沒有定義任何二進制互操作的形式。DOM不是堅持把對象放到XML或HTML的方式。DOM規(guī)定了XML和HTML文檔如何以對象形式表示，從而它們可以用在面向?qū)ο蟮某绦蛑?。DOM不是一套數(shù)據(jù)結(jié)構(gòu)，而是規(guī)定接口的對象模型。雖然文檔包含了顯示parent/child關(guān)系的示意圖，但這些只是由編程接口定義的邏輯關(guān)系，并不是任何特殊的內(nèi)部數(shù)據(jù)結(jié)構(gòu)的表示。

理解DOM（續(xù)）DOM并沒有定義XML或HTML的“真正內(nèi)部語義”。這些語言的語義是由W3C推薦的。DOM是被設(shè)計為尊重這些語義的編程模型。任何用這些語言寫的文檔可用DOM表示。DOM，與COM及CORBA不是一個概念，后者是規(guī)范對象和接口以實現(xiàn)語言無關(guān)的方式。DOM是被設(shè)計為管理HTML和XML文檔的一套接口和對象。它的實現(xiàn)可用任何語言無關(guān)的系統(tǒng)（COM，CORBA）或用綁定在該文檔上的特定語言如Java或ECMAScript。DOM最初的產(chǎn)生是作為允許JavaScriptscripts和Javaprograms在Webbrowsers間進行移植的規(guī)范。

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

字體

文字間的空間

列表顏色

背景

Margin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Date對象(處理日期和時間的存儲、轉(zhuǎn)化和表達)③

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

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

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

⒉

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

location對象(給出當前網(wǎng)頁的URL地址)⑧

navigation對象(提供瀏覽器版本號、運行平臺、瀏覽器使用語言等)⑨

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

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

xmlns:xsl="/1999/

XSL/Transform">包含一個或更多的templates,例如:<xsl:templatematch="/">...</xsl:template>使用下列語句來結(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é)點

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

</h1></body></html>被寫到輸出文檔

Theresultantfilelookslike:

<h1>Howdy!</h1>

</body></html>XSLT如何工作XML文檔被讀入并存儲為一棵節(jié)點樹（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（過時的）versionofXMLIE5isnotgoodenoughforthiscourseIfyoumustuseIE5,theinitialPIisdifferent(youcanlookitupifyoueverneedit)xsl:value-of<xsl:value-ofselect=“XPathexpression”/>選擇一個節(jié)點的內(nèi)容并達到輸出流中（selectsthecontentsofanelementandaddsittotheoutputstream）Theselectattribute（屬性）isrequiredNoticethatxsl:value-ofisnotacontainer（容器）,henceitneedstoendwithaslash（/反斜杠）

Example(前面有的):<h1><xsl:value-ofselect="message"/></h1>xsl:for-eachxsl:for-eachisakindofloopstatement（循環(huán)語句）Thesyntax（語法）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>過濾輸出Youcanfilter(restrict)outputbyaddingacriteriontotheselectattribute’svalue:

<ul>

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

<li>

<xsl:value-of

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

</li>

</xsl:for-each>

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

<xsl:value-of

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

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

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

<li>

<xsl:value-of

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

</li>

</xsl:for-each>這段代碼將所有的書都包含在<li>and</li>，所以除了TerryPratchett外其他書名都是空白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語句Thexsl:choose...xsl:when...xsl:otherwiseconstruct（結(jié)構(gòu)）isXML’sequivalent（相等的）ofJava’sswitch...case...defaultstatement（語句）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>這個例子建立了一個列表包含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（封閉的標記中）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ī)則）當templates被忽視Templatesaren’tusedunlesstheyareapplied例

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

溫馨提示

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

DOM文檔對象模型

文檔簡介

溫馨提示

最新文檔

評論

DOM文檔對象模型

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔