1. 程式人生 > >熟悉 js window 物件屬性和方法

熟悉 js window 物件屬性和方法

熟練window物件的openclosealertconfirmpromptsetTimeoutclearTimeoutsetIntervalclearIntervalmoveByresizeByscrollBy方法的使用掌握window物件的moveToresizeToscrollToprint方法的使用熟練掌握window物件的statuslocationnameselfopener屬性的使用  Window物件是客戶端javascript最高層物件之一,只要開啟瀏覽器視窗,不管該視窗中是否有開啟的網頁,當遇到BODYFRAMESETFRAME元素時,都會自動建立
window物件的例項。另外,該物件的例項也可由window.open()方法建立。由於window物件是其它大部分物件的共同祖先,在呼叫window物件的方法和屬性時,可以省略window物件的引用。例如:window.document.write()可以簡寫成: document.write()。  在視窗中觖發本視窗物件的任何方法和屬性時可以省去視窗的例項名稱。例如給當前的myWin視窗設定status屬性時,可以只用status而不用myWin.status。但是,在事件處理中呼叫location屬性、close()方法或open()方法時必須使用例項名稱。 
6-2-1 window
物件的方法
 
window
物件有以下方法: 

open 
close 
alert 
confirm 
prompt 
setTimeout 
clearTimeout 
setInterval 
clearInterval 
moveBy 
moveTo 
resizeBy 
resizeTo 
scrollBy 
scrollTo 
find 
back 
forward 
home 
stop 
print 
blur 
focus 
captureEvent 
enableExternalCapture 
disableExternalCapture 
handleEvent 
releaseEvent 
routeEvent 
scroll 

1. open
方法  語法格式: 

window.open(URL,
視窗名稱,視窗風格
  功能:開啟一個新的視窗,並在視窗中裝載指定URL地址的網頁。  說明: 

open
方法用於開啟一個新的瀏覽器視窗,並在新視窗中裝入一個指定的URL地址;
open
方法在開啟一個新的瀏覽器視窗時,還可以指定視窗的名稱(第二個引數) 
open
方法在開啟一個新的瀏覽器視窗時,還可以指定視窗的風格(第三個引數)視窗風格有以下選項,這些選項可以多選,如果多選,各選項之間用逗號分隔: 
toolbar
:指定視窗是否有標準工具欄。當該選項的值為1yes時,表示有標準工具欄,當該選項的值為0no時,表示沒有標準工具欄; 
location
:指定視窗是否有地址工具欄,選項的值及含義與toolbar相同; 
directories
:指定視窗是否有連結工具欄,選項的值及含義與toolbar相同; 
status
:指定視窗是否有狀態列,選項的值及含義與toolbar相同; 
menubar
:指定視窗是否有選單,選項的值及含義與toolbar相同; 
scrollbar
:指定當前視窗文件大於視窗時是否有滾動條,選項的值及含義與toolbar相同; 
resizable
:指定視窗是否可改變大小,選項的值及含義與toolbar相同; 
width
:以畫素為單位指定視窗的寬度,已被innerWidth取代; 
height
:以畫素為單位指定視窗的高度,已被innerHeight取代; 
outerWidth
:以畫素為單位指定視窗的外部寬度; 
outerHeight
:以畫素為單位指定視窗的外部高度; 
left
:以畫素為單位指定視窗距螢幕左邊的位置; 
top
:以畫素為單位指定視窗距螢幕頂端的位置; 
alwaysLowered
:指定視窗隱藏在所有視窗之後,選項的值及含義與toolbar相同; 
alwaysRaised
:指定視窗浮在所有視窗之上,選項的值及含義與toolbar相同;
dependent
:指定開啟的視窗為當前視窗的一個子視窗,並隨著父視窗的關閉而關閉,選項的值及含義與toolbar相同;
hotkeys
:在沒有選單欄的新視窗中設定安全退出的熱鍵,選項的值及含義與toolbar相同; 
innerHeight
:設定視窗中文件的畫素高度;
innerWidth
:設定視窗中文件的畫素寬度;
screenX
:設定視窗距離螢幕左邊界的畫素長度;
screenY
:設定視窗距離螢幕上邊界的畫素長度;
titleBar
:指明標題欄是否在新視窗中可見,選項的值及含義與toolbar相同;
z-look
:指明當視窗被啟用時,不能浮在其它視窗之上,選項的值及含義與toolbar相同。 

open
方法返回的是該視窗的引用。小技巧:該方法經常用於在開啟一個網頁時自動開啟另一個視窗。6-2-1:編制一個小程式,它用於在開啟當前視窗時自動開啟另一個視窗,要求該窗沒有標準工具欄、位址列、連結工具欄、選單欄,但有狀態列,視窗中打開的網頁地址為:http://www.dlrtvu.edu.cn 

2. close
方法語法格式: 

window.close() 
功能:close方法用於自動關閉瀏覽器視窗。 

3. alert
方法語法格式: 

window.alert(
提示字串
功能:彈出一個警告框,在警告框內顯示提示字串文字。 

4. confirm
方法語法格式: 

window.confirm(
提示字串
功能:顯示一個確認框,在確認框內顯示提示字串,當用戶單擊“確定”按鈕時該方法返回true,單擊取消時返回false 

5. prompt
方法語法格式: 

window.prompt(
提示字串,預設文字
功能:顯示一個輸入框,在輸入框內顯示提示字串,在輸入文字框顯示預設文本,並等待使用者輸入,當用戶單擊“確定”按鈕時,返回使用者輸入的字串,當單擊“取消”按鈕時,返回null值。 

6. setTimeout
方法語法格式: 

window.setTimeout(
程式碼字元表示式,毫秒數
功能:定時設定,當到了指定的毫秒數後,自動執行程式碼字元表示式。 

7. clearTimeout
方法語法格式: 

window.clearTimeout(
定時器
功能:取消以前的定時設定,其中的引數是用setTimeout設定時的返回值。 

8. setInterval
方法語法格式: 

window.setInterval(
程式碼字元表示式,毫秒數
功能:設定一個時間間隔後(第二個引數),反覆執行程式碼字元表示式的內容 

9. clearInterval
方法語法格式: 

window.clearInterval(
時間間隔器
功能:取消setInterval設定的定時。其中的引數是setInterval方法的返回值。 

10. moveBy
方法語法格式: 

window.moveBy(
水平位移量,垂直位移量
功能:按照給定畫素引數移動指定視窗。第一個引數是視窗水平移動的畫素,第二個引數是視窗垂直移動的畫素。 

11.moveTo
方法語法格式: 

window.moveTo(x,y) 
功能:將視窗移動到指定的指定座標(x,y)處。 

12. resizeBy
方法語法格式: 

window.resizeBy(
水平,垂直
功能:將當前視窗改變指定的大小(x,y),當xy的值大於0時為擴大,小於0為縮小。 

13. resizeTo
方法語法格式: 

window.resizeTo(
水平寬度,垂直寬度
功能:將當前視窗改變成(x,y)大小,xy分別為寬度和高度。 

14. scrollBy
方法語法格式: 

window.scrollBy(
水平位移量,垂直位移量
功能:將視窗中的內容按給定的位移量滾動。引數為正數時,正向滾動,否則反向滾動。 

15. scrollTo
方法語法格式: 

window.scrollTo(x,y) 
功能:將視窗中的內容滾動到指定位置。 

16.find
方法語法格式: 

window.find() 
功能:當觸發該方法時,將彈出一個“find”(查詢)對話視窗,並允許使用者在觸find方法的頁面中查詢一個字串。注:該屬性在IE5.5Netscape6.0中都不支援。 

17. back
方法語法格式: 

window.back() 
功能:模擬使用者點選瀏覽器上的“後退”按鈕,將頁面轉到瀏覽器的上一頁。說明:僅噹噹前頁面存在上一頁時才能進行該操作。注:IE5.5不支援該方法,Netscape6.0支援。 

18. forward
方法語法格式: 

window.forward() 
功能:模擬使用者點選瀏覽器上的“前進”按鈕,將頁面轉到瀏覽器的下一頁。說明:僅噹噹前頁面存在下一頁時才能進行該操作。注:IE5.5不支援該方法,Netscape6.0支援。 

19. home
方法語法格式: 

window.home() 
功能:模擬使用者點選瀏覽器上的“主頁”按鈕,將頁面轉到指定的頁面上。注:IE5.5不支援該方法,Netscape6.0支援。 

20. stop
方法語法格式: 

window.stop() 
功能:模擬使用者點選瀏覽器上的“停止”按鈕,終止瀏覽器的下載操作。注:IE5.5不支援該方法,Netscape6.0支援。 

21. print
方法語法格式: 

window.print() 
功能:模擬使用者點選瀏覽器上的“列印”按鈕,通知瀏覽器開啟列印對話方塊列印當前頁。 

22. blur
方法語法格式: 

window.blur() 
功能:從視窗中移出焦點。當與focus方法合用時必須小心,因為可能導致焦點不斷移進移出。 

23. focus
方法語法格式: 

window.focus() 
功能:使視窗中得到焦點。當與blur方法合用時必須小心,因為可能導致焦點不斷移進移出。 

24. captureEvent
方法語法格式: 

window.captureEvent(Event) 
window.captureEvent(
事件1|事件2|...|事件n) 
功能:捕捉指定引數的所有事件。由於能夠捕獲哪些由本地程式自己處理的事件,所以程式設計師可以隨意定義函式來處理事件。如果有多個事件需要捕捉,各事件之間用管道符“|”隔開。可捕捉的事件型別如下: 

Event.ABORT 

Event.BLUR 

Event.CHANGE 

Event.CLICK 

Event.DBLCLICK 

Event.DRAGDROP 

Event.ERROR 

Event.FOCUS 

Event.KEYDOWN 

Event.KEYPRESS 

Event.KEYUP 

Event.LOAD 

Event.MOUSEDOWN 

Event.MOUSUEMOVE 

Event.MOUSEOUT 

Event.MOUSEOVER 

Event.MOUSEUP 

Event.MOVE 

Event.RESET 

Event.RESIZE 

Event.SELECT 

Event.SUBMIT 

Event.UNLOAD 

25. enableExternalCapture
事件語法格式: 

window.enableExternalCapture(event) 
功能:enableExternalCapture方法用於捕捉通過引數傳入的外部事件。 

26. disableExternalCapture
事件語法格式: 

window.disableExternalCapture() 
功能:取消enableExternalCapture方法的設定,終止對外部事件的捕捉。 

27. handleEvent
事件語法格式: 

window.handleEvent(event) 
功能:觸發指定事件的事件處理器。 

28. releaseEvent
事件語法格式: 

window.releaseEvent(event) 
window.releaseEvent(
事件1|事件2|...|事件n) 
功能:釋放通過引數傳入的已被捕捉的事件,這些事件是由 

window.captureEvent
方法設定的,可釋放的事件與captureEvent相同。 

29. routeEvent
事件語法格式: 

window.releaseEvent(event) 
功能:把被捕捉型別的所有事件轉交給標準事件處理方法進行處理,可轉交的事件與captureEvent相同。 

30 scroll
事件語法格式: 

window.scroll(X
座標,Y座標
功能:將視窗移動到指定的座標位置。 

6-2-2 window
物件的屬性 
window
物件具有如下屬性: 

status 

statusbar 

statusbar.visible 

defaultstatus 

location 

locationbar 

locationbar.visible 

self 

name 

closed 

frames 

frames.length 

length 

document 

history 

innerHeight 

innerWidth 

menubar 

menubar.visible 

opener 

outerHeight 

outerWidth 

pageXOffset 

pageYOffset 

parent 

personalbar 

personalbar.visible 

scrollbar 

scrollbar.visible 

toolbar 

toolbar.visible 

top 

1. status
屬性語法格式: 

window.status=
字串功能:設定或給出瀏覽器視窗中狀態列的當前顯示資訊。小技巧:可以使用該屬性設定瀏覽器視窗狀態列資訊。 

2. statusbar
屬性語法格式: 

window.statusbar.
屬性功能:statusbar屬性本身也是一個物件,用於訪問它自已的visible屬性從而確定狀態列是否可見。注:IE5.5瀏覽器不支援該屬性。 

3. statusbar.visible
屬性語法格式: 

window.statusbar.visible 
功能:檢查狀態列是否可見,如果可見則返回true,反之返回false注:IE5.5瀏覽器不支援該屬性。 

4. defaultstatus
屬性語法格式: 

window.defaultstatus[=
字串
功能:defaultstatus屬性值是瀏覽器窗中狀態列的預設顯示資訊。 

5.location
屬性語法格式: 

window.location=URL 
功能:給出當前視窗的URL資訊或指定開啟視窗的URL 

6. locationbar
屬性語法格式: 

window.locationbar.
屬性功能:locationbar屬性也可以看成是一個子物件,這個屬性用來獲取它自已的 

visible
屬性來確定位置欄是否可見。到目前為止,該屬性只有一個子屬性:visible注:IE5.5不支援該屬性。 

7. locationbar.visible
屬性語法格式: 

window.locationbar.visible 
功能:返回位置欄是否可見,如果可見返回true,反之返回false注:IE5.5不支援該屬性。 

8. self
屬性語法格式: 

window.self.
方法 
window.self.
屬性功能:該屬性包含當前視窗的標誌,利用這個屬性,可以保證在多個視窗被開啟的情況下,正確呼叫當前視窗內的函式或屬性而不會發生混亂。 

9. name
屬性語法格式: 

window.name=
名稱功能:返回視窗名稱,這個名稱是由window.open()方法建立新視窗時給定的。javascript1.0版本中,這個屬性只能用於讀取視窗名稱,而到了 

javascript1.1
版本時,可以用這個屬性給一個不是用window.open()方法建立的視窗指定一個名稱。 

10. closed
屬性語法格式: 

window.closed 
功能:closed屬性用於返回指定視窗的例項是否已經關閉,如果關閉,返回true 

,反之返回flase 

11. frames
屬性語法格式: 

window.frames["
框架名稱"] 
window.frames[
數值
功能:frames屬性是一個數組,用來儲存文件中每一個由元素建立的子視窗()例項,其中的下標即可以是次序號也可以是用FRAME元素的NAME屬性指定的名稱來得到並使用。 

12. frames.length
屬性語法格式: 

window.frames.length 
功能:frames.length屬性用於給出文件中子視窗(框架)例項的個數。 

13. length
屬性語法格式: 

window.length 
功能:length屬性返回一個視窗內的子視窗數目,該屬性與 

window.frame.length
屬性的值相同。 

14. document
屬性語法格式: 

window.document.
事件 
window.document.
方法 
window.document.
屬性 功能:window物件的子物件documentjavascript的核心物件,在指令碼中遇到 

BODY
元素時建立一個例項。 

15. history
屬性語法格式: 

window.history[
數值
window.history.
方法() 
window.history.
屬性 
window
物件的子物件historyjavascript的核心物件之一,該屬性包含了一個已訪問過頁面的名稱和URL的陣列。 

16. innerHeight
屬性語法格式: 

window.innerHeight=
數值功能:返回或指定瀏覽器視窗中文件的畫素高度,這個高度不包括任何工具欄和組成視窗的頁面修飾高度。注:IE5.5不支援該屬性。 

17. innerWidth
屬性語法格式: 

window.innerHeight=
數值功能:返回或指定瀏覽器視窗中文件的畫素寬度,這個寬度不包括任何工具欄和組成視窗的頁面修飾寬度。注:IE5.5不支援該屬性。 

18. menubar
屬性語法格式: 

window.menubar.
屬性功能:menubar屬性也可以看成是一個子物件,這個屬性用來獲取它自已的 

visible
屬性來確定選單欄是否可見。到目前為止,該屬性只有一個子屬性:visible注:IE5.5不支援該屬性。 

19. menubar.visible
屬性語法格式: 

window.menubar.visible 
功能:menubar.visible屬性用於返回選單欄是否可見,如果可見返回true,反之返回false注:IE5.5不支援該屬性。 

20. opener
屬性語法格式: 

window.opener 
window.opener.
方法 
window.opener.
屬性功能:opener屬性與開啟該視窗的父視窗相聯絡,當訪問子視窗中operer屬性時,返回的是父視窗。通過該屬性,可以使用父視窗物件中的方法和屬性。 

21. outerHeight
屬性語法格式: 

window.outerHeight 
功能:outerHeight屬性用於訪問瀏覽器視窗的畫素高度,該高度包括工具欄和裝飾邊的高度。注:IE5.5不支援該屬性。 

22. outerWidth
屬性 語法格式: 

window.outerWidth 
功能:outerWidth屬性用於訪問瀏覽器視窗的畫素寬度,該寬度包括工具欄和裝飾邊的寬度。注:IE5.5不支援該屬性。 

23. pageXOffset
屬性語法格式: 

window.pageXOffset=
數值功能:指定瀏覽器視窗中文件左上角在視窗中的當前水平畫素位置。在利用 

moveTo
移動之前,可以通過該屬性來決定是否需要移動視窗。因為該屬性返回了可見文件相對整個頁面的當前位置。注:IE5.5不支援該屬性。 

24. pageYOffset
屬性語法格式: 

window.pageYOffset=
數值功能:指定瀏覽器視窗中文件左上角在視窗中的當前垂直畫素位置。在利用 

moveTo
移動之前,可以通過該屬性來決定是否需要移動視窗。因為該屬性返回了可見文件相對整個頁面的當前位置。注:IE5.5不支援該屬性。 

25. parent
屬性語法格式: 

window.parent.frames[
數值
window.parent.framesName 
功能:訪問各個子視窗(多框架)所在的父視窗。 

26. personalbar
屬性語法格式: 

window.personalbar.
屬性功能:personalbar屬性本身也是一個物件,用於訪問其自身的visible屬性來確定個人欄是否可見。注:IE5.5不支援該屬性。 

27. personalbar.visible
屬性語法格式: 

window.personalbar.visible 
功能:確定個人欄是否可見,如果可見則返回true,反之返回false注:IE5.5不支援該屬性。 

28. scrollbars
屬性語法格式: 

window.scrollbars.
屬性功能:scrollbars屬性本身也是一個物件,用於訪問其自身的visible屬性來確定滾動欄是否可見。注:IE5.5不支援該屬性。 

29. scrollbars.visible
屬性語法格式: 

window.scrollbars.visible 
功能:scrollbars.visible用於確定滾動欄是否可見,如果可見則返回true,反之返回false注:IE5.5不支援該屬性。 

30. toolbar
屬性語法格式: 

window.toolbar.
屬性功能:toolbar屬性本身也是一個物件,用於訪問它自已的visible屬性從而確定工具欄是否可見。注:IE5.5不支援該屬性。 

31. toolbar.visible
屬性語法格式: 

window.toolbar.visible 
功能:toolbar.visible屬性用於檢查工具欄是否可見,如果可見則返回true反之返回false注:IE5.5不支援該屬性。 

32. top
屬性語法格式: 

window.top.frames[
數值
window.top.frameName 
window.top.
方法() 
window.top.
屬性功能:window物件的top屬性用於包含所有裝入瀏覽器的子視窗(多框架)的最頂層視窗的資訊。

getAttribute()方法●一份文件就是一棵節點樹。

  ●節點分為不同的型別:元素節點、屬性節點和文字節點等。

  ●getElementById()方法將返回一個物件,該物件對應著文件裡的一個特定的元素節點。

  ●getElementsByTagName()方法將返回一個物件陣列,它們分別對應著文件裡的一個特定的元素節點。

  ●這些節點中的每個都是一個物件。

接下來,我們將向大家介紹幾個與這些物件相關聯的屬性和方法。

3.4.1 getAttribute()方法

至此,我們已經向大家介紹了兩種檢索特定元素節點的辦法:一種是使用getElementById()方法,另一種是使用getElementsByTagName()方法。在找到那個元素後,我們就可以利用getAttribute()方法把它的各種屬性的值查詢出來。

getAttribute()方法是一個函式。它只有一個引數——你打算查詢的屬性的名字:

object.getAttribute(attribute)
不過,getAttribute()方法不能通過document物件呼叫,這與我們此前介紹過的其他方法不同。我們只能通過一個元素節點物件呼叫它。

例如,你可以把它與getElementsByTagName()方法結合起來,去查詢每個<p>元素的title屬性,如下所示:
var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));

}
如果把上面這段程式碼插入到前面給出的“購物清單”示例文件的末尾,並在Web瀏覽器裡重新載入這個頁面,螢幕上將彈出一個顯示著文字訊息“a gentle reminder”的alter對話方塊。

在“購物清單”文件裡只有一個帶有title屬性的<p>元素。假如這份文件還有一個或更多個不帶title屬性的<p>元素,則相應的getAttribute("title")呼叫將返回null。null是JavaScript語言中的空值,其含義是“你說的這個東西不存在”。如果你們想親自驗證一下這件事,請先把下面這段文字插入到“購物清單”文件中的現有文字段落之後:
<p>This is just test</p>
然後重新載入這個頁面。這一次,你們將看到兩個alter對話方塊,而第二個對話方塊將是一片空白或者是隻顯示著單詞“null”——具體情況要取決於你的Web瀏覽器將如何顯示null值。

可以修改我們的指令碼,讓它只在title屬性存在時才彈出一條訊息。我們將增加一條if語句來檢查getAttribute()方法的返回值是不是null。趁著這個機會,我們還增加了幾個變數以提高指令碼的可讀性:
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");


if(text!=null)
{
alert(text)
}
}
現在,如果重新載入這個頁面,你們將只會看到一個顯示著“a gentle reminder”訊息的alter對話方塊,如下所示。


我們甚至可以把這段程式碼縮得更短一些。當檢查某項資料是否是null值時,我們其實是在檢查它是否存在。這種檢查可以簡化為直接把被檢查的資料用做if語句的條件。if (something)與if (something != null)完全等價,但前者顯然更為簡明。此時,如果something存在,則if語句的條件將為真;如果something不存在,則if語句的條件將為假。

具體到這個例子,只要我們把if (title_text != null)替換為if (title_text),我們就可以得到更簡明的程式碼。此外,為了進一步增加程式碼的可讀性,我們還可以趁此機會把alter語句與if語句寫在同一行上,這可以讓它們更接近於我們日常生活中的英語句子:
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");


if(text) alert(text)

}
3.4.2 setAttribute()方法

我們此前介紹給大家的所有方法都只能用來檢索資訊。setAttribute()方法與它們有一個本質上的區別:它允許我們對屬性節點的值做出修改。

類似於getAttribute()方法,setAttribute()方法也是一個只能通過元素節點物件呼叫的函式,但setAttribute()方法需要我們向它傳遞兩個引數:

obiect.setAttribute(attribute,value)
在下面的例子裡,第一條語句將把id屬性值是purchase的元素檢索出來,第二條語句將把這個元素的title屬性值設定為a list of goods:

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")
我們可以利用getAttribute()方法來證明這個元素的title屬性值確實發生了變化:
var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
上面這些語句將在螢幕上彈出兩個alert對話方塊:第一個alter對話框出現在setAttribute()方法被呼叫之前,它將是一片空白或顯示著單詞“null”;第二個出現在title屬性值被設定之後,它將顯示著“a list of goods”訊息。

在上例中,我們設定了一個現有節點的title屬性,但這個屬性原先並不存在。這意味著我們發出的setAttribute()呼叫實際完成了兩項操作:先把這個屬性創建出來,然後再對其值進行設定。如果我們把setAttribute()方法用在元素節點的某個現有屬性上,這個屬性的當前值將被覆蓋。

在“購物清單”示例文件裡,<p>元素已經有了一個title屬性,這個屬性的值是a gentle reminder。我們可以用setAttribute()方法來改變它的當前值:

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我會成功!")
alert(ts[i].getAttribute("title"))
}
}
上面這段程式碼將先從文件裡把已經帶有title屬性的<p>元素全部檢索出來,然後把它們的title屬性值全部修改為brand new title text。具體到“購物清單”文件,屬性值a gentle reminder將被覆蓋。

這裡有一個非常值得關注的細節:通過setAttribute()方法對文件做出的修改,將使得文件在瀏覽器窗口裡的顯示效果和/或行為動作發生相應的變化,但我們在通過瀏覽器的view source(檢視原始碼)選項去檢視文件的原始碼時看到的仍將是原來的屬性值——也就是說,setAttribute()方法做出的修改不會反映在文件本身的原始碼裡。這種“表裡不一”的現象源自DOM的工作模式:先載入文件的靜態內容、再以動態方式對它們進行重新整理,動態重新整理不影響文件的靜態內容。這正是DOM的真正威力和誘人之處:對頁面內容的重新整理不需要終端使用者在他們的瀏覽器裡執行頁面重新整理操作就可以實現。