JavaScript学习笔记(4)--面向半新不新的新手

七、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内容	见例７－１
writeln	与write作用一样	见例７－１
open	打开用于write的输出流	见例７－１
close	关闭用于write的输出流	见例７－１

 

例7-1 在网页的标题中显示当前日期，在网页中显示该网页的更新日期，当用户进入网页时说“您好”，当用户点击网页中的链接更换网页内容时说“再见”

目的：使用文档对象的属性、方法及事件

        

 

7.2   cookie属性

cookie是文档对象的一个属性，它用于记录用户在浏览器中执行时的一些状态。用户在使用相同的浏览器显示相同的网页内容时，JavaScript可以通过比较cookie属性值，从而显示不同的网页内容。

值得注意的是，用户可以在浏览器中删除已有的cookie或设置不使用cookie。

１、设置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的字符串。

２、取出cookie

得到cookie时的字符串格式为：

cookie1名＝cookie1值；cookie2名＝cookie2值；……

３、删除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:[email protected]”
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中

目的：学习引用窗体对象，使用窗体对象的属性、方法和事件

      

             

 

 

 

            电子邮件地址：

            主题：

            发送">

            重置">

      

 

7.3.3 窗体中的元素对象

窗体中的元素对象一般都可以与HTML的标记一一对应。下表列出了窗体所有的元素对象名及相应的HTML标记示例

窗体中的元素对象及相应的HTML标记

元素对象名称	type属性值	HTML标记示例
单行文本框	text
多行文本框	textarea
按钮	button	value=”ok” onClick=”do Validate();”>
单选钮	radio	checked value=”yes”>
复选钮	checkbox
列表： (单选列表)       (多选列表)	select-one         select-multiple	Beijing Shanghai   Beijing Shanghai
密码框	password
重置按钮	reset
提交钮	submit
隐含变量	hidden	“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文件中都使用标记表示。当标记中没有size属性时，就是下拉列表，否则就是列表。在列表的情况下，当标记中带有multiple属性时，就是多选列表。

无论哪一种类型的列表，标记

中都需要包含标记以表示列表中的选项内容。

在JavaScript中对列表进行添加、删除选项的操作

(1)   添加列表选项 new Option([选项的文字内容[，选项的值[，初始是否选项[，是否选上]]]])；

var newOption = new Option(“大连”, “5”);

       myList.option[5] = newOption;

(2)   删除列表选项。只要将列表选项数组中指定的选项赋值为null

myList.options[1] = null;

 

示例列表 

        北京

        上海

        天津

 

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程序对窗体中的元素进行赋值、选择等操作。

      

      

 

 

             

                    

                           

                                  

                                  

      

                           

     

                           

                           

                                  

                                  

 

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                           

                                  

                                  

  

                           

     

                           

                           

                                  

                                  

    

                           

     

                           

                           

                                  

                                  

    

                           

     

 

                           

                                  

                                  

    

                           

     

                           

                           

                                  

                                  

      

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                           

                                  

                                  

     

                           

     

                           

                      

                                  

                                  

  

                           

                                 

                    

单行文本框
复选钮
单选钮	Yes                                           No
密码框
隐含变量
按钮	普通按钮">
提交钮	提交">
多行文本框
下拉列表	item1                                                  item2
多选列表	item1                                                  item2
重置钮	重置">

                    

                    

开始测试" οnclick="doTest()">

             

 

 

例7-3          在窗体myForm中的两个列表中移动

目的：学习如何使用窗体中的列表及列表选项元素，特别是如何进行列表项的添加、删除

             

      

             

                    

                           

                           

                           

                           

                           

                    

     

             

a                                           b                                           c

d                                           e                                           f

      

 

 

 

 

 

7．4锚点（anchor）对象

       锚点对象用于在网页中定位，链接对象可用于表示通向定位点的链接。锚点与链接对象都使用标记，当标记中不含有href属性时表示锚点，如果含有href表示链接。

HTML中的锚点语句：

锚点名称”>文字内容

 

JavaScript中的锚点对象是文档对象的一个属性，它通常以数组的形式表示网页中所有的锚点，其语法规则如下：

锚点对象数组：    document.anchors

所有锚点个数：    document.anchors.length

某一锚点的名字：  document.anchors[i].name

 

例7-4  网页中有一个可以滚动的文字区域，包含7个锚点标记，其下方有7个链接（自动生成），每一个链接对应一个锚点位置。

目的：在网页中使用锚点、链接标记

      

      

      

             

                     问题1：

                    

回答1：111

                     问题2：

                    

回答2：222

                     问题3：

                    

回答3：333

                     问题4：

                    

回答4：444

                     问题5：

                    

回答5：555

                     问题6：

                    

回答6：666

                     问题7：

                    

回答7：777

             

             

             

             

             

      

 

7．5链接(link)对象

HTML中的链接语句：

锚点名称” target=”目标字符串”>链接文字内容

网页地址字符串” target=”目标字符串”>链接文字内容

函数名” target=”目标字符串”>链接文字内容

 

       链接对象也是文档对象的一个属性，它通常以数组的形式表示网页中所有的链接。与锚点不同，每个链接对象都具有属性、方法和事件，其属性与窗口（window）对象中的location对象的属性完全一样。其语法规则如下：

链接数组：       document.links

所有链接个数：   document.links.length

 

 

 

 

例 ：网页中有一个链接

target=”_blank”>Blue

 

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事件；改变浏览器状态信息。

      

             

      

      

      

 

 

需要转到的页面">

                    

                     用户名：

                     密码：

                     提交

             

      

 

7．6 图像(image)对象

7．6．1 网页中已有的图像对象

JavaScript中的图像对象是文档对象的一个属性，通常以数组的形式表示网页中所有的图像。其语法规则如下：

图像对象数组：  document.images

所有图像个数：  document.images.length

引用图像对象：  document.images[i] 或 document.images[“图像对象名字”]

例 这个图片用于示例说明” 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[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

 

   

   

          

   

     

                 

   

          

     

   

 

 

          

 

          

   

                   

οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接1]	οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接2]	οnmοuseοut="lefteye.src='eye_c.gif';righteye.src='eye_c.gif';">[链接3]