锚点对象：
网页中的锚点均会被自动看作锚点对象，并依顺序，分别表示为document.anchors[0]，document.anchors[1]...
定义锚点对象的格式：
字串.anchor(属性)
锚点对象的属性：
name 锚点名称
text 锚点字串
链接对象：
网页中的链接均会被自动看作链接对象，并依顺序，分别表示为document.links[0]，document.links[1]...
定义链接对象的格式：
字串.link(属性)
链接对象的属性：
hash URL中的锚点名称
host 主机域名或IP地址
hostname URL中的host+port
href 完整的URL字串
pathname URL中path部分
port URL中端口部分
protocol URL中通讯协议部分
search URL中查询字串部分
target 代表目标的窗口
text 表示A标签中的文字
x 链接对象的左边界
y 链接对象的右边界
链接对象的方法：
handleEvent(事件)
激活对某事件的处理程序。
链接对象的事件处理程序：
onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut
例1：
<Script>
function linkGetter() {
msgWindow = open('','','width=250,height=200')
msgWindow.document.write("共有" + document.links.length + "个搜索引擎")
for (var i = 0; i < document.links.length; i++) {
msgWindow.document.write("<LI>"+document.links[i])
}
}
</Script>
常用的搜索引擎：<BR>
<A HREF="http://www.yam.org.tw/">蕃薯藤</A>
<A HREF="http://www.kimo.com/">奇摩</A>
<A HREF="http://chinese.yahoo.com/">雅虎</A>
<A HREF="http://gais.cs.ccu.edu.tw/">盖世</A>
<A HREF="http://www.openfind.com.tw/">网擎</A>
<A HREF="http://www.dreamer.com.tw/">梦想家</A><BR>
<INPUT TYPE="button" VALUE="网址一览" onClick=linkGetter()>
框架对象：
可以被窗口中的框架引用的对象，具有窗口对象的属性和方法。
格式：
top.frameName|frames[n].属性|方法
parent.frameName|frames[n].属性|方法
例：
/* -------- frameset.htm -------- */
<Script>
document.title = "框架组页";
var usrID = "来宾";
</Script>
<FRAMESET COLS="20%,80%">
<FRAME SRC="menu.htm" NAME=leftFrame>
<FRAMESET ROWS="10%,90%">
<FRAME src="/usrInfo.htm" NAME=upFrame>
<FRAME src="/welcome.htm" NAME=downFrame>
</FRAMESET>
</FRAMESET>
<!-------- menu.htm -------->
<HEAD>
<TITLE>导航页</TITLE>
<STYLE>A{text-decoration:none}</STYLE>
</HEAD>
<BODY>
<CENTER>
<A href="/login.htm" TARGET="downFrame">会员登录</A><BR>
<A HREF="hot.htm" TARGET="downFrame">热门优惠</A><BR>
<A href="/welcome.htm" TARGET="downFrame">回 首 页</A>
<BR>
</CENTER>
</BODY>
/* -------- usrInfo.htm -------- */
<Script>
document.title = "用户信息";
var bye = "欢迎有空常来..."
document.write
("<MARQUEE>亲爱的<FONT COLOR='gray'><U>",top.usrID,"</U></FONT>会员，欢迎您的光临！</MARQUEE>");
</Script>
/* -------- login.htm -------- */
<Script>
document.title = "用户登录";
function login() {
top.usrID = document.loginForm.usr.value;
top.upFrame.location = "usrInfo.htm";
}
</Script>
<HTML>
<FORM NAME="loginForm">
请输入您的大名：
<INPUT TYPE="text" NAME="usr">
<INPUT TYPE="button" VALUE="填写完毕" onClick=login()>
</FORM>
</HTML>
防止直接链接：
例：
<Script> /* -------- hot.htm -------- */
document.title = "热门优惠";
if (top.usrID == null) {
location = "frameset.htm";
}
</Script>
今日优惠：
<LI>超级豪华大比萨。（原价$550，今天只要$450）
<LI>海鲜大比萨。（原价$550，今天只要$450）
检查是否使用框架：
例：
<!-------- welcome.htm -------->
<HEAD>
<TITLE>首页</TITLE>
<STYLE>A{text-decoration:none}</STYLE>
<Script>
if (top.frames.length == 0) {
location = "frameset.htm";
}
if (top.frames.length > 0) {
location = "frameset.htm";
}
</Script>
</HEAD>
<CENTER>
欢迎光临<H1>
<FONT COLOR="green" FACE="arial">
My PIZZA</FONT></H1>
</CENTER>
表单对象：
文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。
格式：
document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）
表单对象的属性：
action 表单动作
elements 以索引表示的所有表单元素
encoding MIME的类型
length 表单元素的个数
method 方法
name 表单名称
target 目标
表单对象的方法：
handleEvent(事件) 使事件处理程序生效
reset() 重置
submit() 提交
文本对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法（参数）
属性：
defaultValue 该对象的value属性
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
focus()
handleEvent(事件)
select() 该对象设置为选取状态
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
例1：
<FORM>
姓名：
<INPUT TYPE="text" NAME="name">
<INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+this.form.name.value)>
</FORM>
例2：
<Script>
function getFocus(obj) {
obj.style.color='red';
obj.style.background='#DBDBDB';
}
function getBlur(obj) {
obj.style.color='black';
obj.style.background="/white";
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
电 话：<INPUT TYPE="text" NAME="tel"
onFocus=getFocus(this) onBlur=getBlur(this)><BR>
</FORM>
</BODY>
例3：
<Script>
var i = 0;
function movenext(obj,i) {
if(obj.value.length==4){
document.forms[0].elements[i+1].focus();
}
}
function result() {
fm = document.forms[0];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码是"+ num);
}
</Script>
<BODY onLoad=document.forms[0].elements[i].focus()>
请输入你的信用卡号码：
<form>
<input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
<input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
<input type=button value=显示 onClick=result()>
</form>
</BODY>
密码对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.密码对象名称.属性
document.表单名称.密码对象名称.方法（参数）
属性：
defaultValue 该对象的value属性
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
focus()
handleEvent(事件)
select() 该对象设置为选取状态
事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
例1：
<Script>
function checkPw() {
fm = document.form1;
if (fm.pw2.value != fm.pw1.value) {
alert("密码不符，请重新输入");
document.form1.pw2.select();
}
else
alert("谢谢你，"+fm.name.value);
}
</Script>
<BODY onLoad=document.form1.name.focus()>
<FORM NAME="form1">
姓 名：<INPUT TYPE="text" NAME="name"><BR>
输入密码：<INPUT TYPE="password" NAME="pw1"><BR>
重新输入：<INPUT TYPE="password" NAME="pw2"><BR>
<INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>
<INPUT TYPE="reset" VALUE="重 填">
</FORM>
</BODY>
例2：
<Script>
function isInt(elm) {
if (isNaN(elm)) {
alert("你输入的是" + elm + "\n不是数字！");
document.forms[0].pw.value = "";
return false;
}
if (elm.length != 4) {
alert("请输入四位数数字！");
document.forms[0].pw.value = "";
return false;
}
}
</Script>
<form action="test.asp" onSubmit="return isInt(this.pw.value)">
请输入四位数数字密码：<BR>
<input type="password" name="pw">
<input type="submit" value="检查">
</form>
按钮对象、提交按钮对象、重置按钮对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法（参数）
属性：
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
click()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
隐藏对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.隐藏对象名称.属性
document.表单名称.隐藏对象名称.方法（参数）
属性：
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
单选按钮对象：
格式：
document.forms[索引].elements[索引](索引).属性
document.forms[索引].elements[索引](索引).方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
属性：
checked 设置该对象为选定状态
defaultChecked 对应该对象的默认选定状态
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
click()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例：
<Script>
function show() {
var x = "先生";
if (document.form1.sex[1].checked)
x = "小姐";
alert(document.form1.name.value + x);
}
</Script>
<FORM NAME=form1>
姓名：<INPUT TYPE="text" NAME="name"><BR>
你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥
<INPUT TYPE="radio" NAME="sex">美女<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=show()>
</FORM>
复选框对象：
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）
属性：
checked 设置该对象为选定状态
defaultChecked 对应该对象的默认选定状态
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
click()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例：
<Script>
function count() {
var checkCount=0;
var num = document.form1.elements.length;
for (var i=0; i<num; i++) {
if (document.form1.elements[i].checked)
checkCount++;
}
alert ("你喜欢 "+ checkCount + "种颜色。")
}
</Script>
<FORM NAME=form1>
请选择你喜欢的颜色：<BR>
<INPUT TYPE="checkbox" NAME="red">红色
<INPUT TYPE="checkbox" NAME="green">绿色
<INPUT TYPE="checkbox" NAME="blue">蓝色<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=count()>
</FORM>
选择对象：
属性：
form 该对象所在的表单
name 该对象的name属性
length 选项的数目
options <option>标记
selectedIndex 所选项目的索引值
type 该对象的type属性
方法：
blur()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
选项对象：选择对象的子对象
格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])
属性：
selected 判断该选项是否被选取
defaultSelected 指定该选项为默认选定状态
index 所有选项所构成的数组索引值
length 选项的数目
text 该选项显示的文字
value 所选项传到服务器的值
例1：
<Script>
var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";
function goto(form) {
var i = form.menu.selectedIndex;
if (i>0) {
location = url[i-1];
}
}
</Script>
<FORM>
<SELECT NAME="menu" onChange="goto(this.form)">
<OPTION>你喜欢哪一个搜索引擎?
<OPTION STYLE="color:red">◆蕃薯藤
<OPTION STYLE="color:red">◇奇摩
<OPTION STYLE="color:red">◆中文雅虎
</SELECT>
</FORM>
例2：
<Script>
function getText() {
sel = document.forms[0].weekday
ans = sel.options[sel.selectedIndex].text
return ans;
}
</Script>
<FORM>请选择...
<SELECT name=weekday>
<OPTION VALUE="Monday">星期一
<OPTION VALUE="Tuesday">星期二
<OPTION VALUE="Wednesday">星期三
<OPTION VALUE="Thursday">星期四
<OPTION VALUE="Friday">星期五
<OPTION VALUE="Saturday">星期六
<OPTION VALUE="Sunday">星期日
</SELECT><P>
<INPUT TYPE="button" VALUE="取出选项的文字"
onClick="alert(getText())">
<INPUT TYPE="button" value="/取出选项的值"
onClick="alert(this.form.weekday.value)"><BR>
</FORM>
例3：
<FORM NAME="form1">
你最喜欢哪一种水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查询</A>
</FORM>
<Script> /* -------- 1.htm -------- */
function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}
</Script>
<FORM>
<SELECT onChange="choice()">
<OPTION>请选择
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>
例4：
<Script>
function createOptions(){
var option = new Option(document.form1.select1.value)
document.form1.select2.options[2] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
例5：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
sel2.options[2] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
例6：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
</script>
<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>
例7：
<Script>
function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}
function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}
</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="选择" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
<input type="button" value="删除" onClick="delOptions()">
</form>
文本区域对象：
属性：
defaultValue 对应该对象的默认值
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
select()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
例1：
<Script>
function isTooLong(elm){
if (elm.length > 50) {
alert("留言内容太长，请修改后再发送....");
return false;
}
}
</script>
<FORM onSubmit="return isTooLong(this.msg.value)">
<TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
欢迎留言，不过请长话短说....
</textarea><BR>
<INPUT TYPE="submit" VALUE="留言完毕">
</FORM>
例2：
<STYLE>
INPUT {background-color:'99FFFF';color:"red"}
TEXTAREA {background-color:'99FFFF';color:"red"}
</STYLE>
<BODY BGCOLOR="99FFFF">
<FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:hwyang@iii.org.tw?subject=不错">
<TABLE>
<CAPTION>读者回函</CAPTION>
<TR><TD>姓 名：
<TD><INPUT TYPE="text" NAME="userName">
<TR><TD>电子邮件：
<TD><INPUT TYPE="text" NAME="email">
<TR><TD VALIGN="top">内 容：
<TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
我非常喜欢你的书，加油!!!
</TEXTAREA>
<TR><TD COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="填好了">
</TABLE>
</FORM>
</BODY>
文件上传对象：
属性：
form 该对象所在的表单
name 该对象的name属性
type 该对象的type属性
value 该对象的value属性
方法：
blur()
select()
focus()
handleEvent(事件)
事件处理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove
Cookie对象：
是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。
Cookie文件的格式：
NS：Cookie.txt
IE：用户名@域名.txt
写入Cookie：
格式：
document.cookie = " 关键字 = 值 [ ; expires = 有效日期 ] [;...]"
备注：
有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT
Wdy / Mon：英文星期 / 月份；
还包含path、domain、secure属性；
每个Web站点（domain）可建立20个Cookie数据；
每个浏览器可存储300个Cookie数据，4k字节；
客户有权禁止Cookie数据的写入。
例1：
<Script>
var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );
document.cookie = "name=Hubert;expires=" + expireDay.toGMTString();
document.write("已经将 Cookie 写入你的硬盘中了!<br>");
document.write("内容是：", document.cookie, "<br>");
document.write("这个 Cookie 的有效时间是：");
document.write(expireDay.toGMTString());
</Script>
例2：
<Script>
var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth );
function setCookie(Key,value) {
document.cookie = Key + "=" + value + ";expires=" + expireDay.toGMTString();
}
setCookie("NAME","HUBERT");
document.write("累计的 Cookies 如下：<BR>");
document.write(document.cookie);
</Script>
读取Cookie：
格式：
document.cookie
例
<Script>
function getCookie(Key){
var search = Key + "=";
begin = document.cookie.indexOf(search);
if (begin != -1) {
begin += search.length;
end = document.cookie.indexOf(";",begin);
if (end == -1) end = document.cookie.length;
return document.cookie.substring(begin,end);
}
}
document.write("嗨！ ",getCookie("name"), " 欢迎光临..")
</Script>
删除Cookie：
格式：
document.cookie = " 关键字 = ; expires = 当前日期"
例：
<Script>
var today = new Date();
function delCookie(Key) {
document.cookie = Key + "=;expires=today.toGMTString";
}
document.write("现有的 Cookies 如下：<BR>");
document.write(document.cookie, "<BR>");
delCookie("name");
document.write("删除后的 Cookies 如下：<BR>");
document.write(document.cookie);
</Script>