一、Document对象
文档对象，代表浏览器窗口中的文档，是window的子对象：通过文档对象可以访问HTML文档中包含的任何HTML标记，并可以动态的改变HTML标记中的内容，例如：表单、图像、表格和超链接等；
1、文档对象的常用属性、方法和事件
Document对象常用属性
- alinkColor 链接文字被单击时的颜色，对应于<body>标记中的alink属性；
- all[] 存储HTML标记的一个数组；
- anchors[] 存储锚点的一个数组，
- bgcolor 文档的背景颜色
- cookie 表示cookie的值
- fgColor 表示文档的文本颜色
- forms[] 存储窗体对象的一个数组。；
- filecreatedDate 创建文档的日期
- fileModifiedDate 文档最后修改的日期
- fileSize 当前文件的大小
- lastModified 文档最后修改的时间
- images[] 存储图像对象的一个数组
- linkColor 未被访问的链接文字的颜色
- links[] 存储link对象的一个数组
- vlinkColor 表示已访问的链接文字的颜色
- title 当前文档标题对象
- body 当前文档主体对象
- readyState 获取某个对象的当前状态
- URL 获取或者设置URL
Document对象常用方法
- close 关闭文档的输出流
- open 打开一个文档输出流并且接受write和writeln方法的创建页面内容；
- write 向文档中写入HTML和JavaScript语句
- writeln 向文档中写入HTML和JavaScript语句，并以换行符结束
- createElement 创建一个html标记
- getElementById 获取指定id的HTML标记
Document对象常用事件
- onabort 对象载入被中断时触发
- onblur 元素或者窗口本身失去焦点时触发
- onchange 改变<select>元素中的选项或者其他表单元素失去焦点，并且在其获取焦点后的内容发生过改变时触发
- onclick 单击鼠标左键时触发。当光标的焦点在按钮上，并按下回车键时，也会触发该事件
- ondblclick 双击鼠标左键时触发
- onerror 出现错误时触发
- onfocus 任何元素或者窗口本身获得焦点时触发
- onkeydown 键盘被按下时触发
- onkeypress 键盘上的按键被按下，并产生一个字符时发生。
- onkeyup 释放键盘上的按键时触发
- onload 页面完全载入后，在window对象上触发，所有框架都载入后，在框架集上触发；
- onmousedown 单击任何一个鼠标按键时触发
- onmouseup 释放任何一个鼠标按键时触发
- onmousemove 鼠标在某个元素上移动时持续触发
- onmouseout 将鼠标从指定元素上移开时触发
- onmouseover 鼠标移到某个元素上时触发
- onreset 单击重置按钮时，在form上触发
- onresize 窗口或者框架的大小发生改变时触发
- onscroll 在任何带滚动条的元素或者窗口上滚动时触发
- onselect 选中文本时触发
- onsubmit 单击提交按钮时，在form 上触发
- onunload 页面完全卸载后，在window对象上触发，或者所有框架都卸载后，在框架集上触发。
2、Document对象的应用
1、链接文字颜色设置
alinkColor 获取或设置连接被单击时的颜色
linkColor 未单击的链接的颜色
vlinkColor 单击过的链接的颜色
<a href="#">why you don not hard work!</a>
<script>
document.vlinkColor = "red";
document.linkColor = "aqua";
document.alinkColor = "green";
</script>2、文档背景色和前景色的设置
（1）bgColor
（2）fgColor
<body>
<!-- 每间隔1s，变换一种颜色 -->
背景自动变色
<script>
var Arraycolor = new Array("#00ff66","#ffff99","#9cf","#fcf","#fc9","#0ff");
var n =0;
function changecolors(){
n++;
if(n == (Arraycolor.length-1)) n = 0;
document.bgColor = Arraycolor[n];
document.fgColor = Arraycolor[n-1];
setTimeout("changecolors()", 1000);
}
changecolors();
</script>3、获取并设置URL;
<script>
document.write("<b>当前页面的URL： </b>"+document.URL);
</script>4、在文档中输出数据
（1）write方法
document.write();
（2) writeln()
与write相同，唯一区别在于writeln方法在所输出的内容后，添加了一个回车换行符；
5、动态添加一个html标记
creatElement()根据一个指定的类型来创建一个html标记
<script>
function addInput(){
var txt = document.createElement("input");
txt.type = "text";
txt.name = "txt";
txt.value = "动态添加的文本框";
document.form1.appendChild(txt);
}
</script>
<form name="form1">
<input type="button" name="btn1" value="动态添加文本框" onclick="addInput();" />
</form>6、获取文本框并修改其内容
getElementById（）方法可以通过指定id来获取html标记，并将其返回；
<script>
function chg(){
var t = document.getElementById("txt");
t.value = "修改文本内容！";
}
</script>
<input type="text" id="txt" value="初始文本内容" />
<input type="button" value="更改文本内容" name="btn" onclick="chg();" />3、js中的cookie设置
1、cookie写入和读取
（1)写入
存储格式：name1= value1;name2 = value2;name3 = value3...
写入：
var cookiename = "name5";
var cookievalue = "value5";
var totalcookie = cookiename+"="+cookievalue;
document.cookie = totalcookie;设置cookie过期时间
var date = new Date();
date.setDate(date.getDate()+7);
document.cookie = encodeURI("test=value")+";expires="+date.toUTCString();（2）cookie的读取
生成cookie数组：
var cookieString = decodeURI(document.cookie);
var cookieArray = cookieString.split(";");获取cookie的名称和值
for(var i = 0;i<cookieArray.length;i++){
var cookieNum = cookieArray[i].split("=");
var cookieName = cookieNum[0];
var cookieValue = cookieNum[1];
}二、表单对象
1、访问表单与表单元素
（1)js访问表单；
<form id="form1" name="myform" method="post" action="">
用户名：<input type="text" name="username" size="15"><br>
密码：<input type="password" name="password" maxlength=8 size=15><br>
<input type="submit" name="sub1" value="登录" />
</form>三种访问方式：
document.forms[0];
document.myform;
document.getElementById("form1")
（2）访问表单元素
三种访问方式：
document.form1.elements[0];
document.form1.password;
document.getElementById("user")
2、表单对象的常用属性、方法与事件
（1）表单对象的常用属性
- name 返回或设置表单的名称
- action 返回或设置表单的URL
- method 返回或设置表单提交的方式，可取值为get或post
- encoding 返回或设置表单信息提交的编码方式；
- id 返回或设置表单的id
- length 返回表单对象中元素的个数
- target 返回或设置提交表单时目标窗口的打开方式
- elements 返回表单对象中元素的构成的数组，数组中的元素也是对象。
（2）表单对象的方法
- reset（） 将所有表单元素重置为初始值；相当于单击了重置按钮；
- submit（） 提交表单数据，相当于单击了提交按钮。
（3）表单对象的事件
reset 重置表单时触发的事件
submit 提交表单时触发的事件
3、表单对象的应用
1、验证表单内容是否为空
在提交表单前进行表单验证，可以节约服务器的处理器周期，为用户节省等待时间。
<body>
<script>
function checkinput(){
if(form1.name.value==""){ //判断用户是否为空
alert("请输入用户名！");
form1.name.select();
return false;
}
if(form1.pwd.value==""){ //判断用户是否为空
alert("请输入用户名！");
form1.pwd.select();
return false;
}
return true;
}
</script>
<input type="image" name="imageField" onclick="return Checkinput();" src="img/me.jpg"/>
<input type="image" name="imageField2" onclick="form.reset();return false;" src="img/prpject.jpg" />
</body>2、获取表单元素的值
当用户提交表单时，程序需要获取表单内容，并对表单内容进行验证或者存储。
三、图像对象
1、图片对象属性
- border 表示图片边界宽度，以像素为单位
- height 表示图像的高度
- hspace 图像与左边和右边的水平空间大小，以像素为单位。
- lowsrc 低分辨率显示候补图像的URL
- name 图片名称
- src 图像URL
- vspace 上下边界垂直空间的大小；
- width 图片的宽度
- alt 鼠标经过图片时显示的文字。
2、图片对象的应用
1、图片的随机显示
<script>
var test =[
['校长','王三'],
['院长','李四'],
['社长','时刻'],
];
var n = Math.floor(Math.random()*test.length);
var img = document.getElementById('imgs');
img.src = test[n][0]+'.gif';
img.alt = test[n][1];
</script>使用test[n][0]语句可以获取图片的名称;使用test[n][1]语句可以获取图片的提示信息。
function changebg(){
var i = Math.floor(Math.random()*5); ///取整并*5;
var src = "";
switch(i){
case 0:
src = "me.jpg";
break;
case 1:
src = "prpject.jpg"
break;
}
document.body.background = src;
setTimeout("changebg()",1000);
}
