JavaScript傳統DOM - tw511教學網

這是將其在JavaScript語言早期版本中引入的模型。大家都被所有瀏覽器都支援，但只允許存取檔案的某些關鍵部分，如表單，表單元素和影象。

該模型提供了若干個唯讀屬性，如標題，URL和上次更改提供關於文件整體的資訊。除了有由該模型可用於設定和獲取文件的屬性值提供各種方法。

文件屬性在傳統DOM：

下面是文件屬性，可以使用傳統DOM存取列表：

屬性	介紹和範例
alinkColor	棄用 - 一個字串，指定啟用連結的顏色。例如：document.alinkColor
anchors[ ]	錨物件的每個錨的陣列，出現在文件中範例: document.anchors[0], document.anchors[1] 等等
applets[ ]	Applet物件為每個小程式的陣列，一個出現在文件中例如: document.applets[0], document.applets[1] 等等
bgColor	Deprecated - 一個字串，指定文件的背景顏色例如: document.bgColor
cookie	有特殊行為的一個字串值屬性，允許與此文件相關的cookie來進行查詢和設定例如: document.cookie
domain	一個字串，是從指定網際網路領域的檔案。用於安全目的例如: document.domain
embeds[ ]	代表嵌入使用<embed>標籤的文件中的資料物件的陣列。同義詞的plugins[]。一些外掛和ActiveX控制元件可以用JavaScript程式碼來控制。例如: document.embeds[0], document.embeds[1] 等等
fgColor	棄用 - 一個字串，指定文件的預設文字顏色例如: document.fgColor
forms[ ]	一種形式的陣列物件，一個用於顯示的文件中的每個HTML表單。例如: document.forms[0], document.forms[1] 等等
images[ ]	Image物件的陣列，一個嵌入HTML <img>標籤的文件中的每個影象。例如: document.images[0], document.images[1] 等等
lastModified	一個唯讀字串，指定最近的更改日期的檔案例如: document.lastModified
linkColor	棄用 - 一個字串，指定的未存取連結的顏色例如: document.linkColor
links[ ]	links[ ] 例如: document.links[0], document.links[1] 等等
location	該檔案的URL。不贊成使用的URL屬性例如: document.location
plugins[ ]	embeds[ ] 的代名詞例如: document.plugins[0], document.plugins[1] and so on
referrer	包含該文件的URL，如果有的話，從該當前文件被掛唯讀字串例如: document.referrer
title	在<title>標籤的文字內容例如: document.title
URL	一個唯讀字串，指定文件的URL 例如: document.URL
vlinkColor	棄用 - 一個字串，指定存取過的連結的顏色例如：document.vlinkColor

文件方法在傳統DOM：

這裡是由傳統DOM支援的方法列表：

屬性	介紹和範例
clear( )	棄用- 刪除的檔案，不返回任何內容範例: document.clear( )
close( )	關閉開啟open()方法返回任何文件流範例: document.close( )
open( )	刪除現有文件的內容，並開啟一個流到新文件的內容可能會被寫入。不返回任何內容。範例: document.open( )
write( value, ...)	將指定的字串或字串插入到文件中正在解析或附加檔案開放open()。不返回任何內容。範例: document.write( value, ...)
writeln( value, ...)	完全相同於write( )，但它附加一個換行符輸出。不返回任何內容範例: document.writeln( value, ...)

例子：

我們可以找到任何HTML元素，使用HTML DOM任何HTML文件。例如，如果一個網頁檔案包含一個表單元素，然後使用JavaScript，我們可以把它稱為document.forms[0]。如果Web文件包括兩個形式元素的第一種形式被稱為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>

注意: 這個例子的形式和內容等返回物件，我們將不得不使用未在本教學中討論這些物件的屬性來存取它們的值。