6-1 DOM ?性質

sŪJ@ɡAN|ھڦeӫإ߬󪫥ҫ]Document Object ModelA² DOM^AoO@ӶhҫA]tFUتAڭ̻ݭnAѳoǪ󪺩ʽMkA~ಣͰʺAARQΰʺA HTML]Dynamical HTMLA² DHTML^Uإ\C

Hint
oǪ󪺩wqOھ WWW Consortium зǨӨqAӸ`iHѦҨGhttp://www.w3c.orgC

b󪫥ҫAҦ󤧶YAOѤ@Ӷh𪬬[cӧe{AШUϡG

ѤWϥiHݥXAwindow OҦ󪺩lCӥѨCӪ󪺤hANiHjݥX󪺭nʡAҦpA window ṶnO documentA document ṶnO formC oǪUPʽ (Properties) Τk (Methods)AJavaScript iQγoǩʽΤkӫإߺʩʡC

ڭ̥Dpo󪺩ʽAöiӧܳoǩʽA~ಣͰʺACs󪺩ʽAUCTؤkG

  1. ΩʽW٨Ӧs󪺩ʽ]oO̱`Ψ쪺k^G
    objectName.propertyName

  2. ΩʽW٨Ӧs󪺩ʽ]ؤkPe@ؤkAnBOGiNʽW٥HrܼƶǤJ^G
    objectName["propertyName"]

  3. ίިӦs󪺩ʽ]֥Ρ^G
    objectName[index]
Aڭ̥ݬ window Xӱ`ΪʽAQγoǩʽAڭ̥iHߨXثe}AHεyеTAdҦpUG

Example]winProp02.htm^G

WzdҪlɦpUG

lɡ]winProp02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>window 󪺴XӰ򥻩ʽ</h2>
<hr>

}]window.location^G<script>document.write(window.location);</script><br>
]iܺd^W X-yС]window.screenLeft^G<script>document.write(window.screenLeft);</script><br>
]iܺd^W Y-yС]window.screenTop^G<script>document.write(window.screenTop);</script><br>

<hr>
</body>
</html>

AiHʥdҪAMbsAN|ݨ줣P X M Y yЭȡC

Hint
b@몺tΡAWIAVk X yЪVAVU Y yЪVC

U@ӽdҡAڭ̻pg window 󪺩ʽӭקAC]Status Line^C@ӨAACObs̤UAbw]pUAANƹm@ӳsɡAsN|bACqXs}CsACrAiNrwܤUCөʽG

ШUCdҡG

Example]winStatus01.htm^G

bWzdҤAڭ̱Nsw]AC令uoOڪw]ATvAOϥΪ̱NƹbuMؤjǡvɡAACTh|אּuMؤjǪvAӤ|@sX{Mj}AoO]ڭ̨ϥ onMouseOver ƥ]ƹmsɡ^IJo@q JavaScript {XAöiӧ window.statusCSOn`NOGq{X^ trueA_h window.status ܱN|o͡AШWzdҪlɡG

lɡ]winStatus01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>p window 󪺪AC</h2>
<hr>

<script>window.defaultStatus="oOڪw]AT";</script>

<a href="http://www.nthu.edu.tw" onMouseOver="window.status='MؤjǪ'; return true">Mj</a><br>
<a href="http://www.nctu.edu.tw" onMouseOver="window.status='qjǪ'; return true">j</a><br>
<a href="http://www.ntu.edu.tw" onMouseOver="window.status='xWjǪ'; return true">xj</a><br>

<hr>
</body>
</html>

Hint
ǥx]Ҧp XP^W IE sAbw]pUO|ܪACCboرpUAAiHϥsUԦu˵/ACvӳ]wܪACC

b window 󤧤UA̭nNO documentA document 󪺴Xӱ`Ψ쪺ʽAШUCdҡG

Example]docProp02.htm^G

WzdҪDlɦpUG

lɡ]docProp02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>document 󪺭nʽ</h2>
<hr>


<script>
document.write("document.location = <font color=red>"+document.location+"</font>]}^<br>");
document.write("document.URL = <font color=red>"+document.URL+"</font>]}^<br>");
document.write("document.referrer = <font color=red>"+document.referrer+"</font>]s쥻e@}^<br>");
document.write("document.lastModified = <font color=red>"+document.lastModified+"</font>]̫קɶ^<br>");
document.write("document.fileModifiedDate = <font color=red>"+document.fileModifiedDate+"</font>]̫קɶ^<br>");
document.write("document.fileUpdatedDate = <font color=red>"+document.fileUpdatedDate+"</font>]ɮ׭ק^<br>");
document.write("document.fileCreatedDate = <font color=red>"+document.fileCreatedDate+"</font>]ɮײͤ^<br>");
document.write("document.fileSize = <font color=red>"+document.fileSize+"</font>]ɮפjp^<br>");
document.write("document.bgColor = <font color=red>"+document.bgColor+"</font>]IC^<br>");
document.write("document.fgColor = <font color=red>"+document.fgColor+"</font>]eC^<br>");
document.write("document.linkColor = <font color=red>"+document.linkColor+"</font>]rsC^<br>");
document.write("document.alinkColor = <font color=red>"+document.alinkColor+"</font>]I襤rsC^<br>");
document.write("document.vlinkColor = <font color=red>"+document.vlinkColor+"</font>]I᪺rsC^<br>");
document.write("document.defaultCharset = <font color=red>"+document.defaultCharset+"</font>]w]r^<br>");
document.write("document.cookie = <font color=red>"+document.cookie+"</font>]p氮rȡ^<br>");
document.write("document.protocol = <font color=red>"+document.protocol+"</font>]ϥΪǿw^<br>");
document.write("document.mimeType = <font color=red>"+document.mimeType+"</font>]MIME Ʈ榡^<br>");
document.write("document.security = <font color=red>"+document.security+"</font>]wҸT^<br>");
</script>

<hr>
</body>
</html>

WzdҤA̱`ΪʽNO document.lastModifiedAiHǦ^̫קɶALϥΪ̪DĩʡC

~A@ӱ`ΡANOnLssAҨϥΪ document ʽOG

dҦpUG

Example]referrer01master.htm^G

bWzdҤApGڭ̪quDvIuQO@vAhiHܡuQO@vCOpGڭ̪NuQO@v}Kbs}C]I䥦tuQO@vs^AJavaScript i document.referrer oءussvpA]|ܡuQO@vAӷ|}uDvCĥγoؾAiHTOۤvhe|QussvAӤ@wnqDiJCWzdҪlɦpUG

lɡ]referrer01master.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ϥ document.referrer HssGD</h2>
<hr>

ODAѦiHXks<a href="referrer01slave.htm">QO@</a>

<hr>
</body>
</html>

QO@lɦpUG

lɡ]referrer01slave.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ϥ document.referrer HssGQO@</h2>
<hr>

<script>
if (document.referrer.indexOf("referrer01master.htm")==-1){
	// O"referrer01master.htm"WssL
	alert("sѡI\ndocument.referrer="+document.referrer);
	alert("бqDiJ");
	document.location = "referrer01master.htm";	// }ܥD
} else {
	alert("s\I\ndocument.referrer="+document.referrer);
}
</script>

oOQO@eC

<hr>
</body>
</html>

pGڭ̱NQO@}Ks}CAs|g document.referrer ӧP_O_XAöi楲n}C

YnիȤݩҥΪsAiHϥ navigator 󪺦UةʽAdҦpUG

Example]navProp02.htm^G

WzdҪlɦpUG

lɡ]navProp02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>navigator 󪺴Xӭnʽ</h2>
<hr>


<script>
document.write("navigator.appName = "+navigator.appName+"]sW١^<br>");
document.write("navigator.appVersion = "+navigator.appVersion+"]sDn^<br>");
document.write("navigator.appminorVersion = "+navigator.appMinorVersion+"]sn^<br>");
document.write("navigator.appCodeName = "+navigator.appCodeName+"]sNX^<br>");
document.write("navigator.cpuClass = "+navigator.cpuClass+"]CPU O^<br>");
document.write("navigator.platform = "+navigator.platform+"]@~tΥx^<br>");
document.write("navigator.systemLanguage = "+navigator.systemLanguage+"]sw]y^<br>");
document.write("navigator.userLanguage = "+navigator.userLanguage+"]ϥΪ̹w]y^<br>");
document.write("navigator.cookieEnabled = "+navigator.cookieEnabled+"]O_\ϥΤp氮^<br>");
</script>

<hr>
</body>
</html>

yܻAڭ̥unϥ navigator 󪺦UةʽANiHDϥΪ̪sOBBCPU OBxBO_䴩p氮TAڭ̼g󥭥x JavaScript {XD`ΡC

ݤFWdҡAUṲ̄@w@ӺðݡG@Ӫ쩳ʽOH٦oǩʽNNqOHƹWAHstiAC@Ӫҥ]tʽOVӶVhA]Yઽ JavaScript ӦCX󤤪Ҩ㦳ʽANAnLFIڭ̳o̦ JavaScript listProp(obj, objName)AiHCX@Ӫ󪺩ҦʽAlXpUG

lɡ]listProp.js^G]ǦϰUYi^
// CLʽ
function listProp(obj, objName) {
	for (var i in obj)
		document.writeln(objName+".<font color=red>"+i+"</font> = <font color=green>"+obj[i]+"</font><br>");
}

bWz{XAobj OǤJƪܼơAobjName hOW١Aܼ i h|̦󪫥󪺨C@өʽW١Aobj[i] hOʽ誺ȡAڭ̦A document.writeln kӱNoǸTLXܺC

|ҨӻAYnCX document Ҩ㦳ʽAiQ listProp.js ơAdҦpUG

Example]docProp01.htm^G

WzdҪlɮצpUG

lɡ]docProp01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"document" ʽC</h2>
<hr>
<a href="http://www.nthu.edu.tw">Mj</a><br>
<a href="http://www.nctu.edu.tw">j</a><br>
<a href="http://www.ntu.edu.tw">xj</a>
<hr>

<script src="listProp.js"></script>
<p><h3>"document" ʽCG</h3>
<p><script>listProp(document, "document")</script>

<hr>
</body>
</html>

Ѧdҥi document 󦳳\hʽAoǩʽ賣iѤWzkv@CXCYX{ʽO [object]ANʽOt@ӪA]ڭ̥iHACX󪺩ʽAҦpAdocument.links Ot@ӪAN󤤩ҧtsA]ڭ̥iHAQ lispProp.jsALX document.links ҦʽApUG

Example]docLinkProp01.htm^G

WzdҪlɮצpUG

lɡ]docLinkProp01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"document.links" ʽC</h2>
<hr>
<a target=_blank href="http://www.nthu.edu.tw">Mj</a><br>
<a target=_blank href="http://www.nctu.edu.tw">j</a><br>
<a target=_blank href="http://www.ntu.edu.tw">xj</a>
<hr>

<script src="listProp.js"></script>
<p><h3>"document.links" ʽCG</h3>
<p><script>listProp(document.links, "document.links")</script>

<hr>
</body>
</html>

PzAڭ̥iH window άO navigator 󪺩ʽi槹㪺CAdҥiѤdҥСG

ڭ̤]iHϥ DOM UتPkӥߧY֡]]t MIDIBMP3 M wma ֡^PϤAШUCdҡG

Example]bgSound01.htm^G

AiHIuIϤvӥѶüƿIA]iHIuI֡vӥѶüƿI֡CWzdҪlɦpUG

lɡ]bgSound01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ʺA֩MI</h2>
<hr>

<script>
function changeBackground() {
	var imgURL = ["bg1.gif", "bg2.gif", "bg3.gif", "bg4.jpg", "bg5.gif"];
	document.body.background = "image/" + imgURL[Math.floor(Math.random()*5)];
}
function changeMusic() {
	var soundURL = ["tomorrow.mid", "pGD.mid", "ӧA򳣤Qn.mid", "xp.mid", "ť.mid"];
	myMusic.src = "music/" + soundURL[Math.floor(Math.random()*5)];
}
</script>

<bgsound id="myMusic" src="" loop="infinite">
<form>
<center>
<input type="button" value="IϤ" onClick="changeBackground()">
<input type="button" value="I" onClick="changeMusic()">
</center>
</form>

</body>
</html>

dҪ޳NIApUG

@ӨAC@ HTML ҴNO@ӪAڭ̥iHϥ id ҨӦsAҦp]w id=idValueC@ӨApGҬOb document U@h]άO <body> </body> BQLҩҥ]^Ahڭ̥iHϥΦ idValue ӦsAҦpWzdҪ myMusic.srcCOApGҬObhh DOM U]Ҧp椺r^A򪽱ϥ idValue OLĪAɥun idValue bӺOߤ@Aڭ̥iHϥΨؤkӨoG MAC@ӼҡAڭ٬OiHϥ name ҨӫwAΤ·СAq document }lAҦppG@Ӥr]name=myText^@Ӫ]name=myForm^A򦹤rҹNO document.myForm.myText.
JavaScript {]pPΡGΩΤ