【正文】 HTML文檔對象模型 HTML DOM定義了一種訪問并操作 HTML文檔的標準方法。所有的元素，它們包含的文字以及它們的樹型都可以被 DOM樹所訪問到。 HTML DOM所包含的內容實在太多，很難在短時間內掌握和學好 HTML DOM編程，掌握 HTML DOM編程最簡單的方法就是多讀別人的程序。但很多客戶端腳本程序通過 這樣的方式引用，無法在文本編輯器中看到，實際上這些文件全部放在瀏覽器的緩存中（ Web服務器傳回的各類文件，包括圖片、頁面文檔等都放在緩存中）。這樣做的目的就是可以讓你方便地找到所需要的 js文件。 ? 單擊主菜單 [工具 ]|[Inter選項 ]，打開“ Inter選項”對話框，單擊“設置”按鈕后出現“設置”對話框，單擊“查看文件”按鈕后，就會顯示緩存文件夾 Temporary Inter Files。按下 F3功能鍵或單擊工具欄的“搜索”，輸入在緩存文件夾中要搜索的文件名 myjsfile*.js（或輸入 *.js，注意文件名后需加上 *），即可搜索出 myjsfile[1].js、 myjsfile[2].js等文件。 ? 打開此 js文件就可看到相應的源代碼。 要對某個 HTML元素進行操控，必須為它設置 ID屬性或 Name屬性。建議全部用 ID屬性，而不用 Name屬性， Name屬性只是為了兼容低版本瀏覽器。注意，在 JavaScript程序中，用 Id為 myColor文本框的值，用 ID為 mybut1按鈕的單擊事件。 這樣就產生了一個問題，即在有表單和無表單標記對象的 HTML文檔中，對某個 HTML元素對象的訪問方式有很大變化，這對程序員來說會帶來很大的麻煩。例如： script language=39。 for(i=0。i++) { var pp=(div)[i] .innerText。 } //顯示所有文本塊中的內容 /script 注意：由于 HTML DOM中默認根對象為 window，因此在window子對象和它的方法引用中可以省略 window不輸。 將例 、例 、例 ，可以看出，訪問 HTML元素的方法不同，而得到的結果相同。如果要設計兼容各種瀏覽器的網頁，建議采用 getElementById方法來訪問 HTML元素對象。 Window對象所包含的屬性、方法、事件、對象如圖 44所示。主要內容包括： ? onload和 onunload都是窗口對象事件，在加載 Web頁面到內存和從內存卸載 Web頁面時發(fā)生。 open方法可以打開一個新的瀏覽器窗口并加載指定的 Web頁，例如以下腳本實現了這樣的功能：新打開一個瀏覽器窗口，窗口左上角相對屏幕左上角的坐標位置為 (75,20)像素，窗口寬 480、高 420個像素，在窗口加載 首頁。 HTML DOM程序設計初步 HTML DOM主要對象介紹及編程實例 ? setInterval、 clearInterval方法以及 setTimeout、 clearTimeout方法均可實現定時器功能。 ? prompt、 alert、 confirm方法實現對話框功能，其中 prompt為接受用戶輸入字符串的對話框； alert為僅輸出文本對話框， confirm實現具有確認和取消按鈕的對話框。 ? showModalDialog、 showModelessDialog方法用于從父窗口中彈出模態(tài)和無模態(tài)對話框。它們的用法和 open方法類似 ,不過它們可以接受父窗口傳遞過來的參數。在 用 window對象的屬性 值。例如單擊按鈕后，從當前頁面跳轉為另外一個頁面 : input type=button value=Navigate onclick=javascript:(39。)。 ? window對象的 frame集合對象實現了在瀏覽器腳本程序中對框架的處理?？梢园岩粋€窗口分割成多個部分，每個部分稱為一個幀，每個幀本身已是一類窗口，繼承了窗口對象所有的屬性和方法。用 parent或 top指定當前幀的父窗口 HTML DOM程序設計初步 HTML DOM主要對象介紹及編程實例 ? 例如要得到窗口中所有幀對象集合，用 。具體用法如下： script language=javascript var frm = 。 i 。 //對每個幀進行循環(huán) alert()。 for (i=0。 i++) alert(frm(i).location)。 //當前幀跳轉到新的頁 /script HTML DOM程序設計初步 HTML DOM主要對象介紹及編程實例 [例 ]window對象對話框演示。演示效果如圖 45所示。運行此頁面程序后注意將瀏覽器窗口收縮到足夠小，以便出現滾動條，否則看不到效果。本例中創(chuàng)建了一個按鈕和超鏈接標記。 (x，y)方法可實現針對瀏覽器窗口頁面顯示區(qū)域左上角位置的屏幕滾動。它提供瀏覽器名稱、版本、客戶端支持的 MIME類型屬性等環(huán)境信息。 HTML DOM程序設計初步 navigator瀏覽器對象 [例 ] 使用 navigator對象獲取瀏覽器相關信息。 location對象提供了與當前打開頁面的 URL一起工作的方法和屬性。 HTML DOM程序設計初步 位置對象 (location) location對象中 href屬性和 assign和 replace方法實現的功能與前述 window對象的 navigate方法相似，實現了在當前窗口中打開一個新的頁面的功能。請比較四者的用法： = ( ( ( HTML DOM程序設計初步 位置對象 (location) 當用戶在程序中通過 href或 url傳遞參數的時候，例如 (“數 x、 y、 z的值，如何取到呢？用 到問號后的“ x=5。z=7”字符串，然后再用 string對象的 split方法分解字符串后即可得到參數 x、 y、 z的值。訪問微軟的相關網站 實現代碼： 運行效果 ： HTML DOM程序設計初步 歷史對象 (history ) 4. 歷史對象 (history) history對象包含瀏覽器的瀏覽歷史信息。用戶在瀏覽器中通過點擊超鏈接或其它方式不斷跳轉到新的頁面，如果要后退看前面已經訪問過的網頁歷史，可以在瀏覽器工具條單擊“后退”。例如 (4)用來顯示后退 4步后的網頁歷史， (4)用來顯示前進 4個頁面后的網頁歷史。 back和forward方法的實現后退和前進一步的功能，等同于(1)和 (1)。其常用的屬性見表 46所示。 實現代碼： 運行效果： HTML DOM程序設計初步 文檔對象 (Document) 6. 文檔對象 (Document) document文檔對象是瀏覽器對象的核心，主要作用就是把這些基本的元素（如 links,anchor等）包裝起來，提供給編程人員使用。在 JavaScript中提供了非常豐富的內部方法和屬性，從而減輕了編程人員的工作，提高了編程效率。 document對象所包含的屬性、方法、事件、對象如圖 410所示。下面主要介紹常用的屬性、方法、事件和對象。 Cookie是放在瀏覽器緩存中的一個文件，里面存放著各個參數名以及對應的參數值。sex=male。expires=Sun May 27 22:04:25 UTC+0800 2022。 Cookie存放的內容可以設置失效期限，既可以永久保留，也可以關閉網站后刪除，也可以在指定時間內失效，通過 expires指定cookie的失效日期，當沒有失效日期時，關閉瀏覽器即失效。例如在登錄一個系統時，需要用戶從學生、科任教師、班主任、輔導員中選擇一種用戶類型登錄，通過 cookie保存選定的用戶類型后，以后再次登錄系統，就不要再讓用戶選擇用戶類型，可從 cookie中取出設定的用戶類型作為默認值。該例子有兩個通用的函數 setCookie和 getCookie分別設置和獲取 cookie。 實現代碼： 運行效果： HTML DOM程序設計初步 文檔對象 (Document) ? document對象的常用方法見表 48所示。在實際使用中， writeln()與write()唯一不同之處在于在尾部加了一個換行符。在完成對 Web文檔的寫操作后，要使用 close()方法來實現對輸出流的關閉。 HTML DOM程序設計初步 文檔對象 (Document) HTML DOM程序設計初步 文檔對象 (Document) [例 ] 文檔對象 write、 open、 close方法示例。單擊“打開新窗口”按鈕打開 首頁。例如以下代碼實現了在瀏覽器窗口文本塊 span區(qū)域，按下鼠標右鍵時將不出現右鍵菜單。 backgroundcolor:blue。 oncontextmenu=return false PThe context menu never displays when you rightclick in this box./P /SPAN HTML DOM程序設計初步 文檔對象 (Document) ?document的對象 document所包含的對象主要是集合對象，包括 all、anchors、 applets、 childNodes、 embeds、 forms、frames、 images、 links、 namespaces、 scripts、styleSheets等。 //得到頁面中得所有對象，并顯示每個對象對應的標記名稱 if (oItem!=null) for (i=0。 i++) alert((i).tagName)。 //得到 id為 Sample的所有元素并顯示出標記名稱 If (oItem != null) for (i=0。 i++) alert((i).tagName)。為方便讀者查閱，表 49列出了 DHTML常用對象名稱。 [例 ] 使用 documentElement將頁面源代碼調入編輯框；用滾動鼠標滾輪的方法放大或縮小圖片。 實現代碼： 運行效果： [例 ] 使用 Form數組和 Form名稱使得兩個 Form中的文本輸入內容保持一致。 實現代碼： 運行效果： 445（文檔對象應用） .html HTML DOM程序設計初步 文檔對象 (Document) [例 ]設計一個輸入個人信息的頁面示例。 實現代碼： 運行效果： [例 ]先出現文件上載對象 ，沒有提交按鈕，在檢查上傳圖片的大小后，若圖片符合要求則動態(tài)創(chuàng)建一個提交按鈕。 實現代碼： 運行效果： [例 ] 動態(tài)生成一個表格 實現代碼： 運行效果： HTML DOM程序設計初步 文檔對象 (Document) [例 ] 用鼠標器滾輪放大和縮小圖形。 實現代碼： ： HTML DOM程序設計初步 HTML DOM樹簡介 HTML DOM樹簡介 HTML DOM是一種結構化的對象模型 ， 采用 DOM技術訪問和更新 HTML頁面內容時 ， 首先依據 HTML源代碼 ， 建立頁面的樹形結構模型 ， 然后按照樹形結構的層次關系來操縱 Web頁面 。 在 DOM樹形結構中 ， 每個節(jié)點都是一個對象 ， 各節(jié)點對象都有屬性和方法 。attributes是節(jié)點屬性的對象集合 。 DOM樹形結構節(jié)點有只讀屬性和讀寫屬性兩類 。 DOM樹節(jié)點的屬性如表 。DOM樹的常用方法如表 411所示。對象名稱的含義和標記名稱基本相同，具體說明可參閱相關資料。 下面的示例代碼給出了 DOM樹的編程方法。 單擊按鈕 button后的執(zhí)行結果如圖 419所示。共有 3個廣告條，每個廣告條中有六個超鏈接。將鼠標放到廣告條上就停止?jié)L動，鼠標離開廣告條就滾動。在 url地址中用問號后附帶參數的方法傳遞參數，每個參數之間用 amp。 例如： url=:amp。 實現代碼： 通過 URL傳遞參數 運行效果： DHTML綜合編程實踐 超文本編輯器及其與 Word的互操作 功能描述：用 Iframe幀標記實現文本編輯器和超文本編輯器功能，可以將編輯框中的內容自動放到 word中讓用戶編輯；可將用戶在 word中