Document 物件

當瀏覽器讀入一頁網頁時，就會根據此網頁的內容來建立相關的文件物件模型（Document Object Model ，簡稱 DOM），我們需要瞭解這些物件模型的性質和方法，才能產生動態的網頁，充分利用 DHTML（Dynamical HTML）的各種功能。

在文件物件模型中，所有的物件之間有一個階層式的關係，請見下表：

這些物件各有不同的屬性及方法，JavaScript 可利用這些屬性及方法來建立網頁的互動性。

首先我們必須知道如何取得物件的屬性，並進而改變這些屬性，才能產生動態網頁。欲存取物件的屬性，有下列三種方法：

用屬性名稱來存取：
用屬性名稱來存取：
此種方法同等於前一種方法，其好處是：可將屬性名字以字串變數傳入
用索引來存取

屬性

alinkColor 屬性

<SCRIPT language="JavaScript">
<!--
    document.alinkColor="#FF0000";
//-->
</SCRIPT>

<body alink="red">
<h1>My Super Duper Web Page</h1>
<SCRIPT language="JavaScript">
<!--
    document.write("The active link color here is " + document.alinkColor);
//-->
</SCRIPT>
<P>
<A HREF="bgcolor.htm">Try a link
</body>

anchors 屬性(陣列)

<h2><a id="books" name="books"></a>Textbook</h2>
<pre>
    <a href="http://www.pageresource.com/jsbook.html">JavaScript: A Beginner's Guide</a>,
    by John Pollock,
    McGraw-Hill, 2001.
</pre>
<hr />

<h3><a name="refs"></a>On-line References</h3>
<ul>
  <li><a href="http://prog.knu.edu.tw/sylee/courses/webprog/">Course Home Page</a></li>
  <li><a href="http://www.pageresource.com/jscript/">Pageresource Javascript</a></li>
  <li><a href="http://www.wsabstract/">Javascript Scripts</a></li>
  <li><a href="http://www.javascriptcity.com/java/">Javascript Forums</a></li>
</ul>
<hr />

<h3><a name="instr">Instructor: <a href="http://prog.knu.edu.tw/sylee/">Prof. S. Y. Lee</a></h3>
<hr />


<SCRIPT language="JavaScript">
<!--
    document.write("There are " + document.anchors.length + " named anchors.");
//-->
</SCRIPT>

applets 屬性(陣列)

bgColor 屬性

<head>
<SCRIPT language="JavaScript">
<!--
    document.bgColor="lightblue";
//-->
</SCRIPT>
</head>

<body bgColor="yellow">
<h1>My Super Duper Web Page</h1>

<SCRIPT language="JavaScript">
<!--
    document.write("The background color here is " + document.bgColor);
//-->
</SCRIPT>
</body>

<body bgColor="red" text="white">
<h1>My Super Duper Web Page</h1>
<B>Want a new background color? Change it to light blue by clicking the button below!</B>
<form>
<input type="button" value="Click"
       onClick="document.bgColor='lightblue';">
</form>
</body>

示範: background 1

<html>
<head>
<title>Background Colors</title>
<SCRIPT language="JavaScript">
<!--
    function newbg(thecolor)
    {
        document.bgColor=thecolor;
    }
//-->
</SCRIPT>
</head>
<body bgColor="yellow">
<B>Want a new background color? Change the color by clicking the button below!</B>
<form>
<input type="button" value="淺藍" onClick="newbg('lightblue');">  
<input type="button" value="橘黃" onClick="newbg('orange');">  
<input type="button" value="米黃" onClick="newbg('beige');">  
<input type="button" value="黃" onClick="newbg('yellow');">
</form>
</body>
</html>

示範: background 2

cookie 屬性

<SCRIPT language="JavaScript">
<!--
    document.cookie="site=homepage;food=cheeseburgers";
//-->
</SCRIPT>

domain 屬性

<SCRIPT language="JavaScript">
<!--
    window.alert("You have reached the " + document.domain + " domain!");
//-->
</SCRIPT>

embeds 屬性(陣列)

fgColor 屬性

<head>
<SCRIPT language="JavaScript">
<!--
    document.fgColor="blue";
//-->
</SCRIPT>
</head>

<body text="blue">
<h1>My Super Duper Web Page</h1>

<SCRIPT language="JavaScript">
<!--
    document.write("The text color here is " + document.fgColor);
//-->
</SCRIPT>
</body>

formName 屬性

<body>
<h2>Forms and Names</h2>
<form name="form1">
<input type="button" name="but" value="You can click me I suppose"
       onClick="document.form1.but='Thanks for clicked me!';">
</form>
</body>

forms 屬性(陣列)

images 屬性(陣列)

<html>
<head>
<SCRIPT language="JavaScript">
<!--
    if (document.images)
    {
        var myimage=new Image(123,164);
        myimage.src="sy.jpg";
    }
//-->
</SCRIPT>
</head>

lastModified 屬性

<body>
<h2>Last Modified Date</h2>
    document.write("Last modified: " + document.lastModified);
</body>

layers 屬性(陣列)

layers 屬性可以用來查出是否使用 Netscape Navigator 4 以上的版本, 如

<SCRIPT language="JavaScript">
<!--
    if (document.layers)
    {
        window.alert("You have Netscape Navigator 4 or better");
    }
//-->
</SCRIPT>

all 屬性

all 屬性可用來存取網頁上所有的物件。 all 屬性只適用於 Internet Explorer 4 以上的版本, 可以用來查出是否使用這類瀏覽器, 如

<SCRIPT language="JavaScript">
<!--
    if (document.all)
    {
        window.alert("You have Internet Explorer 4 or better");
    }
//-->
</SCRIPT>

linkColor 屬性

<SCRIPT language="JavaScript">
<!--
    document.linkColor="#0000FF";
//-->
</SCRIPT>

<body alink="red" link="blue">
<h1>My Super Duper Web Page</h1>
<SCRIPT language="JavaScript">
<!--
    document.write("The link color here is " + document.linkColor);
    document.write("The active link color here is " + document.alinkColor);
//-->
</SCRIPT>
<P>
<A HREF="bgcolor.htm">Try a link
</body>

links 屬性(陣列)

plugins 屬性(陣列)

referrer 屬性

<SCRIPT language="JavaScript">
<!--
    document.write("You came from " + document.referrer + "!");
//-->
</SCRIPT>

示範: referrer.htm

title 屬性

<html>
<head>
<title>Introduction to Web Programming</title>
</head>
<body>
<SCRIPT language="JavaScript">
<!--
    document.write("<H1>" + document.title + "</H1>");
//-->
</SCRIPT>
<h2 align="center">Spring 2003</h2>

</body>

示範: title

URL 屬性

<html>
<head>
<title>Introduction to Web Programming</title>
</head>
<body>
<SCRIPT language="JavaScript">
<!--
    document.write("<H1>" + document.title + "</H1>");
//-->
</SCRIPT>
<h2 align="center">Spring 2003</h2>

<SCRIPT language="JavaScript">
<!--
    document.write("You are at: " + document.URL + ".");
//-->
</SCRIPT>
</body>

示範: URL

vlinkColor 屬性

方法

open()和close()方法

open()方法用以開啟一個新網頁，close()方法用以結這個網頁。
下例以使用者名字開啟新網頁。在body區域寫程式碼，利用表單的文字方塊來擷取使用者輸人的名字。

<html>
<head>
<SCRIPT language="JavaScript">
<!--
function newpage()
{
    var thename=document.myform.yourname.value;
    document.open();
    document.write("<h1>Welcome!</h1>");
    document.write("Hello, " + thename + ", and welcome to my page!");
    document.close();
}
//-->
</SCRIPT>
</head>
<body>
<b>Enter your name in the box below, then click the button to see a personalized page!</b>
<p>
<form name="myform">
Name: <input type="text" name="yourname" size="25">
<p>
<input type="button" value="Click" onClick="newpage();">
</form>
</body>
</html>

輸入資料的檢查

<SCRIPT language="JavaScript">
<!--
    if ( (thename=="") || (thename==null) )
    {
        window.alert("Enter something, then try again!");
    }
//-->
</SCRIPT>