文件物件模型DOM.PPTVIP

6-2：DOM 的方法 本小節介紹DOM的各種方法(method)的使用。 * /30 DOM方法的使用 基本結構 說明 方法跟函數的差別在於，方法是附屬在某個物件，而函數是獨立出來，不過有些像Java的物件導向程式語言中，是沒有函數(function)，只有方法(method)。 * /30 物件名稱.物件方法(引數); 範例6-10 主題：展示history的方法 連結： histGo01.htm 程式碼重點 說明 history.length 記錄了以前瀏覽網頁的頁數。 history.go(n) 可以跳到之前瀏覽過的網頁。 n0表示現在之前，n0表示現在之後，n=0表示現在。 可以省略window，直接使用底下的history 物件。 * /30 document.writeln(history.length)a href=javascript:history.go(-1)回前一頁/aa href=javascript:history.go(0)重新整理/aa href=javascript:history.go(+1)跳下一頁/a window.open()方法使用 基本結構 說明 如果不設定參數，將會使用預設的參數。 url：新視窗所要顯示的檔案或網址。 winName：新視窗的名稱 winControlString：設定新視窗選項的字串，例如寬度、高度、位置、是否顯示狀態列等。 keepHistory：是否保留 History 資料。 * /30 windowId=window.open(url, winName, winControlString, keepHistory); 範例6-11 主題：示範window.open()方法 連結： winOpen01.htm 程式碼重點window.open(url,Detail,status=no,toolbar=no,width=800,height=600); 說明 「href=“#”」是一個「虛擬」的連結，當使用者點選此連結時，瀏覽器並不會嘗試去載入一個新網頁，而是經由 onClick 事件去驅動 JavaScript 的程式碼來開啟新視窗。 使用 HTML 所產生的連結，也可以產生新視窗，只要加入 target=_blank 的屬性就可以了，例如「a target=_blank href=連結網址連結文字/a」，但是此方法並無法指定新視窗的各種屬性。 * /30 範例6-12 主題：使用window.open()控制新視窗的選項 連結： winOpen02.htm 說明 範例中，當使用者按下「開啟新視窗」時，會將控制視窗選項的字串顯示在狀態列，以方便查看。 winFmt中的各種屬性在此不詳細列出說明，可以用listProp()函數來列出window物件的屬性，本章節最後亦有列表說明。 * /30 範例6-13 主題：利用 window.print() 列印網頁 連結： winPrint01.htm 程式碼重點 說明 window.print()會呼叫瀏覽器提供的列印程式，將這個網頁列印下來。 這是兩種不同驅動JavaScript程式碼的方式。 * /30 a href=# onClick=window.print()列印此網頁/aa href=javascript:window.print()列印此網頁/a 範例6-14 主題：利用window.moveBy()產生視窗地震 連結：winQuake01.htm 程式碼重點 說明 moveBy(x,y)的座標是相對於目前視窗的位置。 * /30 window.moveBy(0,x);window.moveBy(x,0); window.moveBy(0,-x);window.moveBy(-x,0); 範例6-15 主題：使用 window.clipboardData.setData() 複製到剪貼簿 連結： winClipboard01.htm 程式碼重點 說明 ondblclick 是「on double click」的簡稱，代表滑鼠點選兩下後，所需執行的 JavaScript 程式。 window.clipboardData.setData() 將文字拷貝到剪貼簿。 this.innerText 就是目前標籤(此例是 pre 標籤)內所夾的文字。 * /30 pre style=background-color:#EEEEEE; ondblclick=javascript:window.clipboardData.setData(Text, this.innerText); alert(你已經拷貝了蔣勳老師的情詩...); window與do