位置:首頁 > Web開發 > Javascript教學 > JavaScript傳統DOM

JavaScript傳統DOM

這是將其在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>

注意: 這個例子的形式和內容等返回對象,我們將不得不使用未在本教學中討論這些對象的屬性來訪問它們的值。