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>

例題:alink.html

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://www.csie.ntu.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://www.csie..ntu.edu.tw/~sylee/">Prof. S. Y. Lee</a></h3>
<hr />

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

例題:anchors.htm

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>

示範: bgcolor.htm

<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 屬性(陣列)

容納所有 <embed> 元素。

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 屬性(陣列)

容納所有 <form> 元素。

images 屬性(陣列)

陣列 images 的元素為網頁上所有 <img> 元素。

<html>
<head>
<title>使用屬性document.images用法之一</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script>
function mytest() {
    var returnData = "";
    var imgs = document.images;
    for (i = 0; i < imgs.length; i++) {
        returnData = returnData + imgs[i].id + ",";
    }

    document.getElementById("returnData").innerHTML = returnData;
}
</script>
</head>
<body>
<br>
<img id="smiley1" border="0" src="../../../gif/smiley.gif" width="150" height="113">
<img id="smiley2" border="0" src="../../../gif/smiley.gif" width="152" height="128">
<input type="button" value="測試" onclick="mytest()" />
<span id="returnData"></span>
</body>
</html>

看效果

innerHTML 屬性

innerHTML 屬性設置或返回文件元素的開始和結束標籤之間的 HTML。

<html>
<head>
<script>
function changeLink(){
    document.getElementById('myAnchor').innerHTML="W3Cschool";
    document.getElementById('myAnchor').href="https://www.w3schools.com/js/js_htmldom.asp";
    document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>

看效果

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 屬性可用來存取網頁上所有的元素。

<html>
<head>
<title>all屬性用法</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script language="JavaScript">
<!--
    var elements = "";
    function start() {
         for (var i = 0; i < document.all.length; ++i)
              elements += "<br />" + document.all[i].tagName;
    pText.innerHTML += elements;
    alert(elements);
    }
//-->
</script>
</head>
<body onLoad = "start()">
<p id="pText">網頁上所有的元素</p>
</body>
</html>

看效果

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("<P>The active link color here is " + document.alinkColor);
//-->
</script>
<P>
<A HREF="bgcolor.htm">Try a link
</body>

示範: linkColor.html

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>

示範: open/close

輸入資料的檢查

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

示範: open/close with data check