JavaScript - 傳統DOM

上一頁
下一頁

這是在早期版本的 JavaScript 語言中引入的模型。它受到所有瀏覽器的良好支援，但只能訪問文件的某些關鍵部分，例如表單、表單元素和影像。

此模型提供了一些只讀屬性，例如 title、URL 和 lastModified，這些屬性提供有關整個文件的資訊。除此之外，此模型還提供了各種方法，可用於設定和獲取文件屬性值。

傳統 DOM 中的文件屬性

以下是可以使用傳統 DOM 訪問的文件屬性列表。

序號 屬性和描述
1

alinkColor

已棄用 - 指定活動連結顏色的字串。

例 - document.alinkColor
2

anchors[ ]

一個 Anchor 物件陣列，每個物件對應文件中出現的一個錨點。

例 - document.anchors[0]，document.anchors[1] 等等
3

applets[ ]

一個 Applet 物件陣列，每個物件對應文件中出現的一個 applet。

例 - document.applets[0]，document.applets[1] 等等
4

bgColor

已棄用 - 指定文件背景顏色的字串。

例 - document.bgColor
5

cookie

一個具有特殊行為的字串值屬性，允許查詢和設定與該文件關聯的 Cookie。

例 - document.cookie
6

domain

一個字串，指定文件所在的網際網路域名。用於安全目的。

例 - document.domain
7

embeds[ ]

一個物件陣列，表示使用 <embed> 標籤嵌入到文件中的資料。與 plugins[ ] 同義。一些外掛和 ActiveX 控制元件可以使用 JavaScript 程式碼控制。

例 - document.embeds[0]，document.embeds[1] 等等
8

fgColor

已棄用 - 指定文件預設文字顏色的字串。

例 - document.fgColor
9

forms[ ]

一個 Form 物件陣列，每個物件對應文件中出現的一個 HTML 表單。

例 - document.forms[0]，document.forms[1] 等等
10

images[ ]

一個 Image 物件陣列，每個物件對應使用 HTML <img> 標籤嵌入到文件中的一個影像。

例 - document.images[0]，document.images[1] 等等
11

lastModified

一個只讀字串，指定文件最近更改的日期。

例 - document.lastModified
12

linkColor

已棄用 - 指定未訪問連結顏色的字串。

例 - document.linkColor
13

links[ ]

這是一個文件連結陣列。

例 - document.links[0]，document.links[1] 等等
14

location

文件的 URL。已棄用，建議使用 URL 屬性。

例 - document.location
15

plugins[ ]

與 embeds[ ] 同義

例 − document.plugins[0]、document.plugins[1] 等等
16

Referrer（來源URL）

一個只讀字串，包含當前文件連結到的文件（如果存在）的 URL。

例 − document.referrer
17

標題

<title> 標籤的文字內容。

例 − document.title
18

URL

一個只讀字串，指定文件的 URL。

例 − document.URL
19

vlinkColor（訪問連結顏色）

已棄用 − 指定已訪問連結顏色的字串。

例 − document.vlinkColor

傳統 DOM 中的文件方法

以下是傳統 DOM 支援的方法列表。

序號 屬性和描述
1

clear( )

已棄用 − 清空文件內容並返回空值。

例 − document.clear( )
2

close( )

關閉使用 open( ) 方法開啟的文件流，並返回空值。

例 − document.close( )
3

open( )

刪除現有文件內容並開啟一個流，可向其中寫入新的文件內容。返回空值。

例 − document.open( )
4

write( value, ...)

將指定的字串插入到當前正在解析的文件中，或附加到使用 open( ) 開啟的文件中。返回空值。

例 − document.write( value, ...)
5

writeln( value, ...)

與 write( ) 相同，不同之處在於它會在輸出中附加一個換行符。返回空值。

例 − document.writeln( value, ...)

示例

我們可以使用 HTML DOM 定位任何 HTML 文件中的任何 HTML 元素。例如，如果網頁文件包含一個 form 元素，那麼使用 JavaScript 可以將其引用為 document.forms[0]。如果您的網頁文件包含兩個 form 元素，則第一個表單被稱為 document.forms[0]，第二個被稱為 document.forms[1]。

使用上面給出的層次結構和屬性，我們可以使用 document.forms[0].elements[0] 等訪問第一個表單元素。

這是一個使用傳統 DOM 方法訪問文件屬性的示例。

線上演示 
<html>
   
   <head>
      <title> Document Title </title>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var ret = document.title;
               alert("Document Title : " + ret );
            
               var ret = document.URL;
               alert("Document URL : " + ret );
            
               var ret = document.forms[0];
               alert("Document First Form : " + ret );
            
               var ret = document.forms[0].elements[1];
               alert("Second element : " + ret );
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <h1 id = "title">This is main title</h1>
      <p>Click the following to see the result:</p>
      
      <form name = "FirstForm">
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
         <input type = "button" value="Cancel">
      </form>
      
      <form name = "SecondForm">
         <input type = "button" value = "Don't ClickMe"/>
      </form>
      
   </body>
</html>

輸出

注意 − 此示例為表單和元素返回物件，我們將不得不使用本教程中未討論的物件屬性來訪問其值。

javascript_html_dom.htm
列印頁面
上一頁
下一頁
廣告