首頁 > 其他

DOM對象介紹

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
一、DOM簡述
DOM—Document Object Model,它是W3C國際組織的一套Web標準。它定義了訪問HTML文檔對象的一套習屬性、方法和事件。 
DOM是以階層組織的節點或資訊片斷的集合。文件物件模型（Document Object Model）是給HTML與XML檔案使用的一組API。DOM的本質是建立網頁與指令碼語言或程式語言溝通的橋樑。

瀏覽器對象是一個分層結構，也稱為文件物件模型，如所示：

 

 

從可以看出：
（1）開啟網頁後，首先看到的是瀏覽器視窗，即頂層的window對象。
（2）其次，看到的是網頁文檔的內容，即document文檔。
（3）定位對象：
window.document.myform.text1
或
document.myform.text1
因為window視窗對象是所有頁面的根對象，所以常常省略。
(4)地址對象location和曆史對象history，它他對應IE瀏覽器中的地址欄和前進/後退按鈕。

二、視窗window
常用屬性：
1 window.clesed：指明視窗是否關閉。
2 window.defaultValue：視窗狀態列的預設資訊。
3 window.docement：表示瀏覽器視窗中的HTML文檔。
4 window.location：表示有關當前URL的資訊。
5 window.history：表示有關當前訪問過的RUL的資訊。
6 window.name：設定或檢索視窗或架構的名稱。
7 window.screen：包含有關客戶的螢幕和顯示效能的資訊。
8 window.screenX：視窗X座標
9 window.screenY：視窗Y座標
10 window.status：設定或檢索視窗狀態列中的資訊。
11 window.title：設定或檢索視窗頂部標題列中的資訊。
12 window.self：當前視窗。
13 window.parent：當前視窗的最上層視窗。
14 window.top：當前顯示的視窗的最上層視窗。
15 window.opener：所開啟“子視窗”的“父視窗”的名稱。

得到當前視窗的詳細資料：<head><title>JavaScript</title></head><body ><script language="javascript" type="text/javascript">window.document.writeln("當前位置："+window.location+"</br>");window.document.writeln("包含視窗個數："+window.length+"</br>");window.document.writeln("目前狀態欄的資訊："+window.status+"</br>");window.document.writeln("當前視窗的名稱："+window.name+"</br>");window.document.writeln("當前視窗的X、Y座標是："+window.screenX+","+window.screenY);</script></body>

常用方法：
1 window.alert(“提示資訊”)：顯示一個包含確定按鈕的對話方塊。
2 window.blur()：使對象失去焦點並激發onblur事件。
3 window.close()：關閉視窗。
4 window.open(“開啟視窗的url”,”視窗名”,”視窗特徵”)：按指定特徵開啟視窗。
視窗特徵參數如下:
height：視窗高度
width：視窗寬度
top：視窗距螢幕上方的象素值
left：視窗跟螢幕左側的象素值
toolbar：是否顯示工具列，yes或1表示顯示，no或0表示不顯示。
menubar：是否顯示功能表列，yes或1表示顯示，no或0表示不顯示。
scrollbars：是否顯示滾動欄，yes或1表示顯示，no或0表示不顯示。
resizable：是否允許改變視窗大小，yes或1表示否允，no或0表示不否允示。
location：是否顯示地址欄，yes或1表示顯示，no或0表示不顯示。
status：是否顯示狀態列，yes或1表示顯示，no或0表示不顯示。
5 window.confirm(“提示資訊”)：顯示一個確認對話方塊，包括確定和取消按鈕。當點確定按鈕時返回的是true,點取消按鈕時返回的是false。
6 window.prompt(“提示資訊”,顯示在text中的預設值)：顯示帶輸入框提示對話方塊，主要用來收集資訊。當點確定按鈕時返回的是true,點取消按鈕時返回的是false。
7 視窗定位的方法：
（1） window.moveBy(x,y)：實現視窗的定向、定量移動。兩個參數分別表示x方向移動的距離和y方向移動的距離。
（2） window.moveTo(x,y)：把視窗移動到指定座標位置。兩個參數分別表示橫座標、縱座標。

8 視窗大小控制的兩個方法：（1）resizeBy(x,y)：按指定的尺寸調整視窗的大小。兩個參數分別表示在水平方向上的改變數和垂直方向上的改變數。
（2）resizeTo(x,y)：把視窗調整到指定尺寸。兩個參數分別表示瀏覽器視窗的寬和高。

9 操作定時器的兩個方法： 
（1）setTimeout(“函數’,毫秒數)：設定定時器，經過指定毫秒值後執行某個函數。
（2）clearTimeout(定時器對象)：取消某個定時器。

三、曆史對象history
主要屬性：
1 window.history.length:得到瀏覽器曆史清單中的項目個數。

主要方法：
1 window.history.back():載入History列表中的上一個URL，相當於IE的後退按鈕。等同於window.history.go(-1);
2 window.history.forward():載入History列表中的下一個URL，相當於IE的前進按鈕。等同於window.history.go(1);
3 go(“url” or number):載入History列表中的一個URL，或要求瀏覽器移動指定的頁面數。

四、地址對象location
此對象相當於IE瀏覽器中的地址欄,包含了關於當前URL地址的資訊.它提供了一種重新載入當前URL的方法。主要屬性：
1 window.location.hash：設定或檢索另一個頁面裡的錨
2 window.location.host：設定或檢索URL的主機名稱和連接埠號碼
3 window.location.hostname：設定或檢索URL的主機名稱部分
4 window.location.pathname：設定或檢索URL相對路徑
5 window.location.href：設定或檢索完整的URL字串（常用）
6 window.location.port：設定或檢索主機連接埠號碼
<script language="javascript" type="text/javascript">window.document.writeln("錨 "+window.location.hash+"</br>");window.document.writeln("主機名稱及連接埠號碼 "+window.location.host+"</br>");window.document.writeln("主機名稱 "+window.location.hostname+"</br>");window.document.writeln("連接埠號碼 "+window.location.port+"</br>");window.document.writeln("相對路徑 "+window.location.pathname+"</br>");window.document.writeln("URL連結字串 "+window.location.href+"</br>");
</script>

主要方法：
1 assign(“url”)：載入URL指定的新的HTML文檔。
2 reload()：重新載入當前頁。
3 replace(“url”)：通過載入URL指定的文檔來替換當前文檔。
五、文檔對象DocumentDocument對象表示給定瀏覽器視窗中的HTML文檔，並用於檢索文檔的資訊、檢查和修改HTML元素和文檔中的文本、以及處理事件。

主要屬性：
1 alinkColor：設定或擷取元素中所有啟用連結的顏色2 linkColor：設定或擷取對象文檔連結的顏色。3 vlinkColor：設定或擷取使用者已訪問過的連結顏色。4 URL：設定或擷取當前文檔的 URL。5 location:擷取當前URL的資訊。6 title：設定或擷取當前文檔的標題。7 protocol：設定或擷取 URL 的協議部分。8 readyState：擷取表明對象目前狀態的值。9 alinkColor：設定或擷取元素中所有啟用連結的顏色。10 bgColor：設定或擷取表明對象後面的背景顏色的值。11 fgColor：設定或擷取文檔的前景(文本)顏色。12 all：返回對象所包含的元素集合的引用。13 anchors：擷取所有帶有 name 和/或 id 屬性的 a 對象的集合。此集合中的對象以 HTML 源順序排列。14 applets：擷取文檔中所有 applet 對象的集合。15 childNodes：擷取作為指定對象直接後代的 HTML 元素和 TextNode 對象的集合。16 embeds：擷取文檔中所有 embed 對象的集合。17 forms：擷取以源順序排列的文檔中所有 form 對象的集合。18 frames：擷取給定文檔定義或與給定視窗關聯的文檔定義的所有 window 對象的集合。19 images：擷取以源順序排列的文檔中所有 img 對象的集合。20 links：擷取文檔中所有指定了 HREF 屬性的 a 對象和所有 area 對象的集合。21 namespaces：擷取 namespace 對象的集合。22 scripts：擷取文檔中所有 script 對象的集合。23 styleSheets：擷取代表與文檔中每個 link 或 style 對象的執行個體相對應的樣式表的 styleSheet 對象的集合。
主要方法：1 clear(): 清除當前文檔。2 close(): 關閉輸出資料流並強制將資料發送到顯示。3 write("text"): 在指定視窗的文檔中寫入一個或多個 HTML 運算式。4 writeln("text"): 在指定視窗的文檔中寫入一個或多個 HTML 運算式，後面追加一個分行符號。5 focus(): 使得元素得到焦點並執行由 onfocus 事件指定的代碼。6 hasFocus():擷取表明對象目前是否擁有焦點的值。7 getElementById("ID "):8 getElementsByName("Name "):9 getElementsByTagName(“TagName”):

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More