七、JavaScript常用文档对象
文档(document)对象是浏览器窗口(window)对象的一个主要部分。它包含了网页显示的各个元素对象。网页文件中的HTML标记静态地提供了各级文档对象的内容。
文档对象也具有属性和方法。通过JavaScript改变网页中的内容,实际上就是通过调用JavaScript函数改变文档对象的属性值,或使用文档对象的方法,模仿用户操作的效果。
7.1 文档对象常用属性
属 性 |
意 义 |
示 例 |
anchors |
锚点对象数组 |
见以后小结的具体讲解 |
forms |
窗体对象数组 |
…… |
links |
链接对象数组 |
…… |
images |
图像对象数组 |
…… |
applets |
Java程序块数组 |
…… |
embeds |
插入的程序块数组 |
…… |
title |
网页标题 |
…… |
cookie |
用于记录用户操作状态 |
…… |
domain |
网页域名 |
…… |
lastModified |
上一次修改日期 |
…… |
linkColor |
网页中的激活状态的链接颜色 |
…… |
alinkColor |
网页中的链接颜色 |
…… |
vlinkColor |
网页中的已访问过的链接颜色 |
…… |
bgColor |
网页背景颜色 |
…… |
fgColor |
网页文字颜色 |
…… |
文档对象常用方法
属 性 |
意 义 |
示 例 |
write |
向网页中输出HTML内容 |
见例7-1 |
writeln |
与write作用一样 |
见例7-1 |
open |
打开用于write的输出流 |
见例7-1 |
close |
关闭用于write的输出流 |
见例7-1 |
例7-1 在网页的标题中显示当前日期,在网页中显示该网页的更新日期,当用户进入网页时说“您好”,当用户点击网页中的链接更换网页内容时说“再见”
目的:使用文档对象的属性、方法及事件
<html>
<head>
<script language="JavaScript">
//设置网页标题
function setTitle() {
document.title = "Today is" + new Date();
}
//显示网页时......
function hello() {
alert("您好");
}
//离开网页时......
function bye() {
alert("再见");
}
//显示网页最后更新日期
function updateInfo() {
document.write("上一次本网页更新日期:");
document.write(document.lastModified);
}
//显示新的网页内容
function newWindow() {
var msg1 = "这是新的一页";
var msg2 = "大家好";
document.open("text/html","replace");
document.write(msg1);
document.write(msg2);
document.close();
}
</head>
<body onload = “setTitle();hello();” onunload=”bye();”>
<a href=”javascript:newWindow()”>新的一页</a>
<p>
<script language=”JavaScript”>
updateInfo();
</script>
</body>
</html>
7.2 cookie属性
cookie是文档对象的一个属性,它用于记录用户在浏览器中执行时的一些状态。用户在使用相同的浏览器显示相同的网页内容时,JavaScript可以通过比较cookie属性值,从而显示不同的网页内容。
值得注意的是,用户可以在浏览器中删除已有的cookie或设置不使用cookie。
1、设置cookie
浏览器保存cookie时是用一系列的“变量名=值”组成的字符串表示,并以分号“;”相间隔。设置cookie的字符串格式如下:
cookie名=cookie值;expires=过期日期字符串;[domain=域名;path=路径;secure;]
expires值设置的是该cookie的有效日期;domain和path项是可选的,如果不设置domain 和path,则表示缺省为网页所在的域名和路径。例如:某网页地址是http://67.85.238.132:18/cbx,那么域名就是67.85.238.132:18,路径就是/cbx。如果使用secure,则表示客户端与服务器端传送cookie时将通过安全通道。
用JavaScript设置cookie,实际上就是用JavaScript的方法组成上述cookie的字符串。
2、取出cookie
得到cookie时的字符串格式为:
cookie1名=cookie1值;cookie2名=cookie2值;……
3、删除cookie
删除cookie实际上是设置指定的cookie名的值为空串,过期日期是当前日期以前的日期。
7.3窗体(form)及其元素对象
窗体对象是文档对象的一个主要元素。窗体对象包含有许多用于收集用户输入内容的元素对象,例如文本框(text),按钮(button),列表(select)等,通过这些元素对象,窗体将用户输入的数据传递到服务器端进行处理。
一个网页中可以包含有多个窗体,但这些窗体的标记不可以交叉或嵌套。
7.3.1引用窗体对象
使用下述两种方法(后面还会讲到通过DHTML对象模型方法得到窗体对象)得到窗体对象。
(1) 使用窗体标记中的名称(name)值。
var myForm1 = document.form1;
var myForm2 = document.form2;
(2)通过窗体数组
var myForm1 = document.forms[0];
var myForm2 = document.forms[1];
或
var myForm1 = document.forms[“form1”];
var myForm1 = document.forms[“form2”];
7.3.2窗体对象的常用属性、方法及事件
窗体对象常用属性
属 性 |
意 义 |
示 例 |
action |
窗体提交后的URL |
myForm.action=“/doLogin.jsp” myForm.action=“mailto:john@abc.com” |
elements |
窗体中包含的元素对象(例如文本,选钮等)数组 |
|
length |
窗体中元素的个数 |
myForm.length(与myForm.elements一样) |
method |
提交窗体的方式,post或get |
myForm.method=”post”; |
name |
窗体的名字,可以直接用于引用窗体 |
var formName = myForm.name; |
target |
提交窗体后显示下一网页的位置 |
myForm.target=”_top”; |
窗体对象常用方法
方 法 |
意 义 |
示 例 |
reset() |
将窗体中各元素值恢复到缺省值,与点击重置按钮(reset)的效果是一样的 |
myForm.reset() |
submit() |
提交窗体,与点击提交按钮(submit)的效果是一样的 |
myForm.submit() |
窗体对象常用事件
属 性 |
意 义 |
onReset(JavaScript语句或函数) |
当进行重置窗体操作时执行指定的JavaScript语句或函数 |
onSubmit(JavaScript语句或函数) |
当进行重置窗体操作时执行指定的JavaScript语句或函数 |
例7-2 让用户输入电子邮件地址和邮件主题,按“发送”钮后,打开Outlook软件进行发送电子邮件的操作,这时用户输入的参数就会一起带到Outlook中
目的:学习引用窗体对象,使用窗体对象的属性、方法和事件
<html>
<head>
<script language="JavaScript">
//通过窗体的onSubmit事件调用该函数
function doSubmit() {
//用户输入的电子邮件地址
var sEmail = document.emailForm.txtEmail.value;
//用户输入的电子邮件主题
var sSubject = document.emailForm.txtSubject.value;
//窗体中action的内容
var sAction = document.emailForm.action;
//将用户输入的电子邮件地址和主题附加到action
//使用函数escape()将字符串中特殊字符转换为URL可识别的字符
document.emailForm.action = sAction + escape(sEmail) + "?subject=" + escape(sSubject);
}
</script>
</head>
<body>
<form name="emailForm" action="mailto:" method="post" onsubmit="doSubmit()">
电子邮件地址:<input type="text" name="txtEmail"><br>
主题:<input type="text" name="txtSubject"><br>
<input type="submit" name="btnSubmit" value="发送">
<input type="reset" name="btnReset" value="重置">
</form>
</body>
</html>
7.3.3 窗体中的元素对象
窗体中的元素对象一般都可以与HTML的标记一一对应。下表列出了窗体所有的元素对象名及相应的HTML标记示例
窗体中的元素对象及相应的HTML标记
元素对象名称 |
type属性值 |
HTML标记示例 |
单行文本框 |
text |
<input type=”text” name=”txtUsername” value=”john” onBlur=”checkString();”> |
多行文本框 |
textarea |
<textarea name=”txtNotes”></textarea> |
按钮 |
button |
<input type=”button” name=”btnGo” value=”ok” onClick=”do Validate();”> |
单选钮 |
radio |
<input type=”radio” name=”rdoAgree” checked value=”yes”> |
复选钮 |
checkbox |
<input type=”checkbox” name=”chkA” checked> |
列表: (单选列表) (多选列表) |
select-one select-multiple |
<select name=”listProvince”> <option> <option> </select> <select size=10 multiple name=”listProvince”> <option> <option> </select> |
密码框 |
password |
<input type=”password” name=”txtPassword”> |
重置按钮 |
reset |
<input type=”reset” name=”btnReset”> |
提交钮 |
submit |
<input type=”submit” name=”btnSubmit”> |
隐含变量 |
hidden |
<input type=”hidden” name=”actionParam” value= “delete”> |
在JavaScript中引用窗体中的元素对象可以用以下两种方法:
(1)通过元素名称的方法 document.窗体对象名称.元素名称
(2)通过窗体的元素组的方法 document.窗体对象名称.elements[i] 或
document.窗体对象名称.elements[“元素名称”]
窗体元素对象的常用方法
方 法 |
意 义 |
blur() |
让光标离开当前元素 |
focus() |
让光标落到当前元素上 |
select() |
用于种类为text,textarea,password的元素,选择用户输入的内容 |
click() |
模仿鼠标点击当前元素 |
窗体元素对象的常用属性
属 性 |
意 义 |
form |
返回当前元素属于的窗体的名称 |
name |
元素对象的名字,用于识别元素及提交至服务器端时作为变量名 |
type |
元素对象的种类,有的是在HTML的标记中直接设置 |
value |
元素对象的值 |
defaultValue defaultChecked |
元素对象初始值(text,password,textarea) 元素对象初始是否选上(checkbox,radio) |
checked |
元素对象是否选上(checkbox,radio) |
readonly |
该元素不可以被编辑,但变量仍传递到服务器端 |
disabled |
该元素不可以被编辑,且变量将不传递到服务器端 |
窗体元素对象的常用事件
事 件 |
意 义 |
onBlur |
当光标离开当前元素时 |
onChange |
当前元素的内容变化时 |
onClick |
鼠标单击当前元素时 |
onDblClick |
鼠标双击当前元素时 |
onDragDrop |
拖放当前元素时 |
onFocus |
当光标落到当前元素上时 |
onKeyDown |
当按下键盘时 |
onKeyPress |
当按一下键盘时 |
onKeyUp |
当松开键盘时 |
onMouseDown |
当按下鼠标时 |
onMouseMove |
当移动鼠标时 |
onMouseOut |
当鼠标移出当前元素时 |
onMouseOver |
当鼠标移到当前元素时 |
onMouseUp |
当松开鼠标时 |
onMove |
当移动当前元素时 |
onSelect |
当选择当前元素内容时(用于种类为text,textarea, password的元素) |
7.3.4 列表及列表选项元素
网页中的列表包括下拉列表和列表两种,在HTML文件中都使用<select>标记表示。当<select>标记中没有size属性时,就是下拉列表,否则就是列表。在列表的情况下,当<select>标记中带有multiple属性时,就是多选列表。
无论哪一种类型的列表,标记<select>中都需要包含标记<option></option>以表示列表中的选项内容。
在JavaScript中对列表进行添加、删除选项的操作
(1) 添加列表选项 new Option([选项的文字内容[,选项的值[,初始是否选项[,是否选上]]]]);
var newOption = new Option(“大连”, “5”);
myList.option[5] = newOption;
(2) 删除列表选项。只要将列表选项数组中指定的选项赋值为null
myList.options[1] = null;
示例列表 <select name=”province”>
<option value=”0”>北京</option>
<option value=”1”>上海</option>
<option value=”2”>天津</option>
</select>
myList = document.myForm.province;
列表属性
属 性 |
意 义 |
示 例 |
options |
列表选项数组 |
myList.options[1]表示列表中的第二个选项 |
length |
列表选项长度,与options.length相同 |
myList.length结果为3 |
selectedIndex |
对于单选列表,它是当前选择项在选项数组中的元素序号;对于多选列表,它是第一个选择项在选项数组中的元素序号 |
|
列表选项属性
属 性 |
意 义 |
示 例 |
selected |
选项是否选上,返回结果为true/false |
|
defaultSelected |
选项初始时是否选上 |
|
text |
选项的文字内容 |
myList.options[1].text 结果为“上海” |
value |
选项的值 |
myList.options[1].value结果为“1” |
例7-3 当用户按下“开始测试”按钮后,JavaScript根据窗体元素的种类type,自动进行填写文字内容、选择按钮、选择列表项等操作,最后在提示信息框中按“OK”钮,JavaScript就会自动按下“重置”按钮,清空窗体内容。
目的:学习如何使用窗体及其元素的属性、方法和事件,学习如何使用JavaScript程序对窗体中的元素进行赋值、选择等操作。
<html>
<head>
<script language="JavaScript">
function doTest() {
//allElements为所有窗体元素的对象数组
var allElements = document.myForm.elements;
//对窗体元素对象数组中的每个元素对象进行比较判断
for(var i=0;i<allElements.length;i++) {
//如果窗体元素种类是text,设置其值
if(allElements[i].type == "text") {
allElements[i].value = "我是文本框";
}
//如果窗体元素对象是checkbox,将其选上并赋值
else if(allElements[i].type == "checkbox") {
allElements[i].checked = true;
allElements[i].value = "checkboxValue";
}
//如果窗体元素种类是radio,由于一组单选钮的名称是一样的
//因此,通过比较其值进行选择
else if(allElements[i].type == "radio") {
if(allElements[i].value == "yes") {
allElements[i].checked = true;
}
}
//如果窗体元素种类是password,设置其值,屏幕上将不会显示内容
else if(allElements[i].type == "password") {
allElements[i].value = new Date().getTime();
}
//如果窗体元素种类是textarea,设置其值
else if(allElements[i].type == "textarea") {
allElements[i].value = "long text string";
}
//如果窗体元素种类是select-one,选择其第二项
else if(allElements[i].type == "select-one") {
allElements[i].selectIndex = 1;
}
//如果窗体元素种类是多选列表select-multiple,选择每一项
else if(allElements[i].type == "select-multiple") {
allElements[i].options[0].selected = true;
allElements[i].options[1].selected = true;
}
//如果窗体元素种类是reset,出现提示框后按下它
else if(allElements[i].type == "reset") {
alert("JavaScript将自动按下\“重置\”钮");
allElements[i].click();
}
}
}
</script>
</head>
<body>
<form name="myForm">
<table>
<tr>
<td>单行文本框</td>
<td><input type="text" name="myText"></td>
</tr>
<tr>
<td>复选钮</td>
<td><input type="checkbox" name="myCheckbox"></td>
</tr>
<tr>
<td>单选钮</td>
<td>
<input type="radio" name="myRadio" value="yes">Yes
<input type="radio" name="myRadio" value="no">No
</td>
</tr>
<tr>
<td>密码框</td>
<td><input type="password" name="myPassword"></td>
</tr>
<tr>
<td>隐含变量</td>
<td><input type="hidden" name="myHidden"></td>
</tr>
<tr>
<td>按钮</td>
<td><input type="button" name="myButton" value="普通按钮"></td>
</tr>
<tr>
<td>提交钮</td>
<td><input type="submit" name="mySubmit" value="提交"></td>
</tr>
<tr valign="top">
<td>多行文本框</td>
<td><textarea name="myTextarea" cols="40" rows="3"></textarea></td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="mySelect">
<option>item1</option>
<option>item2</option>
</select>
</td>
</tr>
<tr valign="top">
<td>多选列表</td>
<td>
<select name="mySelect" multiple size="2">
<option>item1</option>
<option>item2</option>
</select>
</td>
</tr>
<tr>
<td>重置钮</td>
<td><input type="reset" name="myReset" value="重置"></td>
</tr>
</table>
<div><input type="button" value="开始测试" onclick="doTest()"></div>
</form>
</body>
</html>
例7-3 在窗体myForm中的两个列表中移动
目的:学习如何使用窗体中的列表及列表选项元素,特别是如何进行列表项的添加、删除
<html>
<head>
<script language="JavaScript">
//moveList用于对两个多项列表进行选项的移动操作
//from为“需要移动”的列表名称,to为“移动到”列表名称
function moveList(from,to) {
var fromList = document.myForm.elements[from];
var fromLen = fromList.options.length;
var toList = document.myForm.elements[to];
var toLen = toList.options.length;
//current为“需要移动”列表中的当前选项序号
var current = fromList.selectedIndex;
//如果“需要移动”列表中有选项,则进行移动操作
while(current > -1) {
//o为“需要移动”列表中当前选择对象
var o = fromList.options[current];
var t = o.text;
var v = o.value;
//根据已选项新建一个列表选项
var optionName = new Option(t,v,false,false);
//将该选项添加到“移动到”列表中
toList.options[toLen] = optionName;
toLen++;
//将该选项从“需要移动“列表中清除
fromList.options[current] = null;
current = fromList.selectedIndex;
}
}
</script>
</head>
<body>
<form name="myForm">
<table>
<tr valign = "top">
<td>
<select name="leftList" multiple size="6" style="width:50px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
<td>
<!--通过事件onclick调用JavaScript的moveList函数-->
<input type="button" name="to" value=">>" onclick="moveList('leftList','rightList')"><p>
<input type="button" name="backTo" value="<<" onclick="moveList('rightList','leftList')"><p>
</td>
<td>
<select name="rightList" multiple size="6" style="width:50px;">
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
7.4锚点(anchor)对象
锚点对象用于在网页中定位,链接对象可用于表示通向定位点的链接。锚点与链接对象都使用<a></a>标记,当标记中不含有href属性时表示锚点,如果含有href表示链接。
HTML中的锚点语句:
<a name=”锚点名称”>文字内容</a>
JavaScript中的锚点对象是文档对象的一个属性,它通常以数组的形式表示网页中所有的锚点,其语法规则如下:
锚点对象数组: document.anchors
所有锚点个数: document.anchors.length
某一锚点的名字: document.anchors[i].name
例7-4 网页中有一个可以滚动的文字区域,包含7个锚点标记,其下方有7个链接(自动生成),每一个链接对应一个锚点位置。
目的:在网页中使用锚点、链接标记
<html>
<head>
</head>
<body>
<div style="height:100px;width:300px;overflow:scroll;border:1px solid">
<a name="q1">问题1:</a>
<div>回答1:111</div>
<a name="q2">问题2:</a>
<div>回答2:222</div>
<a name="q3">问题3:</a>
<div>回答3:333</div>
<a name="q4">问题4:</a>
<div>回答4:444</div>
<a name="q5">问题5:</a>
<div>回答5:555</div>
<a name="q6">问题6:</a>
<div>回答6:666</div>
<a name="q7">问题7:</a>
<div>回答7:777</div>
</div>
<!--自动生成与锚点对应的链接-->
<script language="JavaScript">
for(var i=0;i<document.anchors.length;i++) {
var index = i+1;
document.write('<a href="#' + document.anchors[i].name +'">问题' + index + '</a>');
if(i==4) {
document.write('<p>');
}else if(i!=9) {
document.write('|');
}
}
</script>
</body>
</html>
7.5链接(link)对象
HTML中的链接语句:
<a href=”#锚点名称” target=”目标字符串”>链接文字内容</a>
<a href=”网页地址字符串” target=”目标字符串”>链接文字内容</a>
<a href=”javascript:函数名” target=”目标字符串”>链接文字内容</a>
链接对象也是文档对象的一个属性,它通常以数组的形式表示网页中所有的链接。与锚点不同,每个链接对象都具有属性、方法和事件,其属性与窗口(window)对象中的location对象的属性完全一样。其语法规则如下:
链接数组: document.links
所有链接个数: document.links.length
例 :网页中有一个链接
<a href=”http://67.85.238.132:18/cbx/essay.jsp?username=admin&group=grp1#blue”
target=”_blank”>Blue</a>
linkObj = document.links[0]; //得到链接对象
链接对象属性
属 性 |
意 义 |
示 例 |
href |
链接地址字符串,如果要调用JavaScript函数,要以“JavaScript:”开始 |
linkObj.href 结果为 http:// 67.85.238.132:18/ cbx/essay.jsp?username=admin&group=grp1#blue |
hash |
href中的以#开始的表示锚点的一个字符串 |
linkObj.hash结果为 #blue |
hostname |
href中的服务器名、域名或IP地址 |
linkObj.hostname 结果为 67.85.238.132 |
post |
href中的端口名 |
linkObj. post 结果为 18 |
host |
href中的hostname和port |
linkObj. host 结果为 67.85.238.132 |
pathname |
href中的子目录名及文件名 |
linkObj. pathname 结果为 /cbx/essay.jsp |
protocol |
href中从开始至”:”间的字符串 |
linkObj. protocol 结果为 http |
search |
href中从”?”开始表示变量部分的字符串 |
linkObj. search 结果为 ?username=admin&group=grp1 |
target |
显示链接地址的位置 |
linkObj. target 结果为 _blank表示新的一页 |
例7-5 网页上有”提交”链接,通过该链接提交窗体,并且当光标移动到链接上时,浏览器的状态栏中将显示”提交至服务器……”
目的:在链接对象中使用onmouseover、onmouseout事件;改变浏览器状态信息。
<html>
<head>
<script language="JavaScript">
function showStatus(s) {
if(s == "in") {
window.status="提交至服务器......"
} else {
window.status="";
}
return true;
}
</script>
</head>
<body>
<!--<form method="post" action="https://login.yahoo.com/config/login"> -->
<form method="post" action="需要转到的页面">
<input type=hidden name=".done" value="http://mail.yahoo.com">
用户名:<input type="text" name="login">
密码:<input type="password" name="passwd">
<a href="javascript:document.forms[0].submit();" onmouseover="return showStaus('in')" onmouseout="return showStatus('out')">提交</a>
</form>
<body>
</html>
7.6 图像(image)对象
7.6.1 网页中已有的图像对象
JavaScript中的图像对象是文档对象的一个属性,通常以数组的形式表示网页中所有的图像。其语法规则如下:
图像对象数组: document.images
所有图像个数: document.images.length
引用图像对象: document.images[i] 或 document.images[“图像对象名字”]
例 <img src=”myPict.gif” name=”myImg” alt=”这个图片用于示例说明” longdesc=”test”>
图像对象是myImage = document.images[0]; 或 myImage = document.images[“myImg”];
图像对象属性
属 性 |
意 义 |
示 例 |
name |
图像对象名字(只读) |
myImage.name 结果为 myImg |
src |
图像文件地址 |
myImage. src结果为 file:///c:/js_book/myPict.gif |
alt |
关于图像对象功能的文字说明 |
myImage. alt结果为 “这个图片用于示例说明” |
complete |
浏览器显示图像是否完成(只读) |
其值是true 或 false |
height |
图像高度,单位是像素(只读) |
myImage. height结果为 50 |
width |
图像宽度,单位是像素(只读) |
myImage. width结果为 35 |
7.6.2 网页中新建图像对象
使用关键字new就可以新建图像对象,其语法规则如下:
new Image([宽度,][高度]);例如:var myImage = new Image();
如果要在网页中预装载3个图像对象,3个图像文件名文别为0.gif,1.gif,2.gif,可用下述语句实现。
theImages = new Array(3);
for (i=0;i<theImages.length;i++) {
theImages[i] = new Image();
theImage[i].src = I + ‘,gif’;
}
例 7-6 制作图片翻转效果
目的:在图像对象上应用onmouseover 和onmouseout 事件
用到的4张图片
eye_c.gif eye_d.gif
eye_l.gif eye_r.gif
<html>
<head>
</head>
<body text="#eeeeee" vLink="#eeee00" aLink="#00eeee" link="#eeee00" bgColor="#0000ff">
<table border="0" cellpadding="5">
<tr>
<td colspan="3" align="center">
<img name="lefteye" src="eye_c.gif" border="0" height="75" width="95">
<img name="righteye" src="eye_c.gif" border="0" height="75" width="95">
</td>
</tr>
<tr>
<td>
<b><a href="#" onmouseover="lefteye.src='eye_l.gif';righteye.src='eye_l.gif';"
onmouseout="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接1]</a></b>
</td>
<td>
<b><a href="#" onmouseover="lefteye.src='eye_d.gif';righteye.src='eye_d.gif';"
onmouseout="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接2]</a></b> </td>
<td>
<b><a href="#" onmouseover="lefteye.src='eye_r.gif';righteye.src='eye_r.gif';"
onmouseout="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接3]</a></b> </td>
</tr>
</table>
</body>
</html>