Posted on 2010-06-13 18:51
幻海藍(lán)夢(mèng) 閱讀(4390)
評(píng)論(2) 編輯 收藏 所屬分類:
JS
出處：http://hi.baidu.com/zrg8090/blog/item/2ed5dfefdbacbd252cf53426.html
一、DOM簡(jiǎn)述
DOM—Document Object Model,它是W3C國(guó)際組織的一套Web標(biāo)準(zhǔn)。它定義了訪問(wèn)HTML文檔對(duì)象的一套習(xí)屬性、方法和事件。
DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合。文檔對(duì)象模型（Document Object Model）是給HTML與XML文件使用的一組API。DOM的本質(zhì)是建立網(wǎng)頁(yè)與腳本語(yǔ)言或程序語(yǔ)言溝通的橋梁。
瀏覽器對(duì)象是一個(gè)分層結(jié)構(gòu)，也稱為文檔對(duì)象模型，如下圖所示：
從上圖可以看出：
（1）打開(kāi)網(wǎng)頁(yè)后，首先看到的是瀏覽器窗口，即頂層的window對(duì)象。
（2）其次，看到的是網(wǎng)頁(yè)文檔的內(nèi)容，即document文檔。
（3）定位對(duì)象：
window.document.myform.text1
或
document.myform.text1
因?yàn)閣indow窗口對(duì)象是所有頁(yè)面的根對(duì)象，所以常常省略。
(4)地址對(duì)象location和歷史對(duì)象history，它他對(duì)應(yīng)IE瀏覽器中的地址欄和前進(jìn)/后退按鈕。
二、窗口window
常用屬性：
1 window.clesed：指明窗口是否關(guān)閉。
2 window.defaultValue：窗口狀態(tài)欄的默認(rèn)信息。
3 window.docement：表示瀏覽器窗口中的HTML文檔。
4 window.location：表示有關(guān)當(dāng)前URL的信息。
5 window.history：表示有關(guān)當(dāng)前訪問(wèn)過(guò)的RUL的信息。
6 window.name：設(shè)置或檢索窗口或框架的名稱。
7 window.screen：包含有關(guān)客戶的屏幕和顯示性能的信息。
8 window.screenX：窗口X坐標(biāo)
9 window.screenY：窗口Y坐標(biāo)
10 window.status：設(shè)置或檢索窗口狀態(tài)欄中的信息。
11 window.title：設(shè)置或檢索窗口頂部標(biāo)題欄中的信息。
12 window.self：當(dāng)前窗口。
13 window.parent：當(dāng)前窗口的最上層窗口。
14 window.top：當(dāng)前顯示的窗口的最上層窗口。
15 window.opener：所打開(kāi)“子窗口”的“父窗口”的名稱。
得到當(dāng)前窗口的詳細(xì)信息：
JavaScript
常用方法：
1 window.alert(“提示信息”)：顯示一個(gè)包含確定按鈕的對(duì)話框。
2 window.blur()：使對(duì)象失去焦點(diǎn)并激發(fā)onblur事件。
3 window.close()：關(guān)閉窗口。
4 window.open(“打開(kāi)窗口的url”,”窗口名”,”窗口特征”)：按指定特征打開(kāi)窗口。
窗口特征參數(shù)如下:
height：窗口高度
width：窗口寬度
top：窗口距屏幕上方的象素值
left：窗口跟屏幕左側(cè)的象素值
toolbar：是否顯示工具欄，yes或1表示顯示，no或0表示不顯示。
menubar：是否顯示菜單欄，yes或1表示顯示，no或0表示不顯示。
scrollbars：是否顯示滾動(dòng)欄，yes或1表示顯示，no或0表示不顯示。
resizable：是否允許改變窗口大小，yes或1表示否允，no或0表示不否允示。
location：是否顯示地址欄，yes或1表示顯示，no或0表示不顯示。
status：是否顯示狀態(tài)欄，yes或1表示顯示，no或0表示不顯示。
5 window.confirm(“提示信息”)：顯示一個(gè)確認(rèn)對(duì)話框，包括確定和取消按鈕。當(dāng)點(diǎn)確定按鈕時(shí)返回的是true,點(diǎn)取消按鈕時(shí)返回的是false。
6 window.prompt(“提示信息”,顯示在text中的默認(rèn)值)：顯示帶輸入框提示對(duì)話框，主要用來(lái)收集信息。當(dāng)點(diǎn)確定按鈕時(shí)返回的是true,點(diǎn)取消按鈕時(shí)返回的是false。
7 窗口定位的方法：
（1） window.moveBy(x,y)：實(shí)現(xiàn)窗口的定向、定量移動(dòng)。兩個(gè)參數(shù)分別表示x方向移動(dòng)的距離和y方向移動(dòng)的距離。
（2） window.moveTo(x,y)：把窗口移動(dòng)到指定坐標(biāo)位置。兩個(gè)參數(shù)分別表示橫坐標(biāo)、縱坐標(biāo)。
8 窗口大小控制的兩個(gè)方法：（1）resizeBy(x,y)：按指定的尺寸調(diào)整窗口的大小。兩個(gè)參數(shù)分別表示在水平方向上的改變量和垂直方向上的改變量。
（2）resizeTo(x,y)：把窗口調(diào)整到指定尺寸。兩個(gè)參數(shù)分別表示瀏覽器窗口的寬和高。
9 操作定時(shí)器的兩個(gè)方法：
（1）setTimeout(“函數(shù)’,毫秒數(shù))：設(shè)置定時(shí)器，經(jīng)過(guò)指定毫秒值后執(zhí)行某個(gè)函數(shù)。
（2）clearTimeout(定時(shí)器對(duì)象)：取消某個(gè)定時(shí)器。
三、歷史對(duì)象history
主要屬性：
1 window.history.length:得到瀏覽器歷史清單中的項(xiàng)目個(gè)數(shù)。
主要方法：
1 window.history.back():加載History列表中的上一個(gè)URL，相當(dāng)于IE的后退按鈕。等同于window.history.go(-1);
2 window.history.forward():加載History列表中的下一個(gè)URL，相當(dāng)于IE的前進(jìn)按鈕。等同于window.history.go(1);
3 go(“url” or number):加載History列表中的一個(gè)URL，或要求瀏覽器移動(dòng)指定的頁(yè)面數(shù)。
四、地址對(duì)象location
此對(duì)象相當(dāng)于IE瀏覽器中的地址欄,包含了關(guān)于當(dāng)前URL地址的信息.它提供了一種重新加載當(dāng)前URL的方法。主要屬性：
1 window.location.hash：設(shè)置或檢索另一個(gè)頁(yè)面里的錨
2 window.location.host：設(shè)置或檢索URL的主機(jī)名和端口號(hào)
3 window.location.hostname：設(shè)置或檢索URL的主機(jī)名部分
4 window.location.pathname：設(shè)置或檢索URL相對(duì)路徑
5 window.location.href：設(shè)置或檢索完整的URL字符串（常用）
6 window.location.port：設(shè)置或檢索主機(jī)端口號(hào)
主要方法：
1 assign(“url”)：加載URL指定的新的HTML文檔。
2 reload()：重新加載當(dāng)前頁(yè)。
3 replace(“url”)：通過(guò)加載URL指定的文檔來(lái)替換當(dāng)前文檔。
五、文檔對(duì)象DocumentDocument對(duì)象表示給定瀏覽器窗口中的HTML文檔，并用于檢索文檔的信息、檢查和修改HTML元素和文檔中的文本、以及處理事件。
主要屬性：
1 alinkColor：設(shè)置或獲取元素中所有激活鏈接的顏色2 linkColor：設(shè)置或獲取對(duì)象文檔鏈接的顏色。3 vlinkColor：設(shè)置或獲取用戶已訪問(wèn)過(guò)的鏈接顏色。4 URL：設(shè)置或獲取當(dāng)前文檔的 URL。5 location:獲取當(dāng)前URL的信息。6 title：設(shè)置或獲取當(dāng)前文檔的標(biāo)題。7 protocol：設(shè)置或獲取 URL 的協(xié)議部分。8 readyState：獲取表明對(duì)象當(dāng)前狀態(tài)的值。9 alinkColor：設(shè)置或獲取元素中所有激活鏈接的顏色。10 bgColor：設(shè)置或獲取表明對(duì)象后面的背景顏色的值。11 fgColor：設(shè)置或獲取文檔的前景(文本)顏色。12 all：返回對(duì)象所包含的元素集合的引用。13 anchors：獲取所有帶有 name 和/或 id 屬性的 a 對(duì)象的集合。此集合中的對(duì)象以 HTML 源順序排列。14 applets：獲取文檔中所有 applet 對(duì)象的集合。15 childNodes：獲取作為指定對(duì)象直接后代的 HTML 元素和 TextNode 對(duì)象的集合。16 embeds：獲取文檔中所有 embed 對(duì)象的集合。17 forms：獲取以源順序排列的文檔中所有 form 對(duì)象的集合。18 frames：獲取給定文檔定義或與給定窗口關(guān)聯(lián)的文檔定義的所有 window 對(duì)象的集合。19 images：獲取以源順序排列的文檔中所有 img 對(duì)象的集合。20 links：獲取文檔中所有指定了 HREF 屬性的 a 對(duì)象和所有 area 對(duì)象的集合。21 namespaces：獲取 namespace 對(duì)象的集合。22 scripts：獲取文檔中所有 script 對(duì)象的集合。23 styleSheets：獲取代表與文檔中每個(gè) link 或 style 對(duì)象的實(shí)例相對(duì)應(yīng)的樣式表的 styleSheet 對(duì)象的集合。
主要方法：1 clear(): 清除當(dāng)前文檔。2 close(): 關(guān)閉輸出流并強(qiáng)制將數(shù)據(jù)發(fā)送到顯示。3 write("text"): 在指定窗口的文檔中寫入一個(gè)或多個(gè) HTML 表達(dá)式。4 writeln("text"): 在指定窗口的文檔中寫入一個(gè)或多個(gè) HTML 表達(dá)式，后面追加一個(gè)換行符。5 focus(): 使得元素得到焦點(diǎn)并執(zhí)行由 onfocus 事件指定的代碼。6 hasFocus():獲取表明對(duì)象目前是否擁有焦點(diǎn)的值。7 getElementById("ID "):8 getElementsByName("Name "):9 getElementsByTagName(“TagName”):