Document对象主要有如下属性：
alinkColor：文档中文本链接被单击时的颜色
bgColor：文档的背景色
fgColor：文档的前景色(文本颜色)
form、forms：文档中所有表单对象或它们形成的数组
image、images：表示文档中所有图片对象或它们形成的数组
lastModified：文档最后的修改时间
link、links：文档中所有链接对象及它们形成的数组
linkColor：文档中未访问文本链接的颜色
title：文档的标题栏文本内容
URL：文档的URL地址
vlinkColor：文档中已访问文本链接的颜色
例1：使用bgcolor属性更改背景颜色
代码如下：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>动态改变背景色</TITLE>
<SCRIPT language="JavaScript">
function change(color)
{
document.bgColor=color ;
}
</SCRIPT>
</HEAD>
<BODY>
<H2> 请选择喜欢的背景色</H2>
<FONT size=4>
<SPAN onClick="change('green')">绿色</SPAN>
|<SPAN onClick="change('#C0D9D9')">淡蓝色</SPAN>
|<SPAN onClick="change('red')">红色</SPAN>
</FONT>
</BODY>
</HTML>
例2：两文本框同步显示输入文本
要点：
（1）onKeyUp事件的使用。
（2）document.forms属性的使用。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任务一</title>
</head>
<body>
<form name="first" >
文本框1：<input type="text" onKeyUp="document.second.elements[0].value=this.value;"
value="在这里输入内容" />
</form>
<form name="second">
文本框2：<input type="text" onKeyUp="document.forms[0].elements[0].value=this.value;"
value="在这里输入内容" />
</form>
</body>
</html>
例3：实现图片轮换效果
要点：
（1）控制层的的隐藏显示。
（2）Window对象的setTimeout方法
（3）window对象的onLoad事件
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务三</title>
<script type="text/javascript">
var count=1;
function init(){
for(var i=1;i<5;i++){
if(count==i){
document.getElementById("pic"+i).style.display="block";
}else{
document.getElementById("pic"+i).style.display="none";
}
}
count++;
if(count==5){
count=1;
}
setTimeout("init()",3000);
}
</script>
</head>
<body onload="init()">
<div class="center">
<div id="pic1"><img src="images/images1.jpg" width="400" height="300"></div>
<div id="pic2" style="display:none"><img src="images/images2.jpg" width="400" height="300"></div>
<div id="pic3" style="display:none"><img src="images/images3.jpg" width="400" height="300"></div>
<div id="pic4" style="display:none"><img src="images/images4.jpg" width="400" height="300"></div>
</div>
</body>
</html>