第九章-javascript文档对象

1、文档对象课程安排 学习文档对象的属性和方法。 掌握如何在网页中输出内容。 学习图像对象的各种属性。 掌握链接对象和锚对象的属性和。主要内容 文档对象 文档对象的应用 图像对象 链接对象 锚对象文档对象 文档对象介绍 文档对象的属性 文档对象的方法 文档中对象的引用方法文档对象介绍文档对象对象是代表一个浏览器窗口或框架中的显示HTML文件的对象。JavaScript 会为每个HTML文档自动创建一个document对象。通过document对象可以操作HTML文档的内容及其它对象。文档对象的子对象form Image link anchorcookie表单对象图片对象链接对象锚 对 象 对象lo

2、cation 地址对象embed和plugin对象applet对象文档对象的属性属性说明bgcolor设置和返回当前文档的背景颜色fgcolor设置和返回当前文档的文本默认颜色title设置和返回当前文档的标题URL返回当前文档的URLreferrer返回链接到当前文档的HTML文档的URL文档对象的方法方法说明clear()该方法可以擦去文档中的内容close()该方法可以关闭一个文档输出流，并显示已经在文档流中的内容open()该方法可以打开一个新文档write()该方法可以在文档中添加数据writeln()与write()方相同，只是在write()方法后添加了一个换行文档中对象的引用方

3、法一9-1对象的引用方法请输入姓名：请输入性别：文档中对象的引用方法二function btClick1()/获取第1个form对象的第1个元素的值var Name = document.forms0.elements0.value;/也可以使用以下方法/var Name = document.myForm1.myName.value;/var Name = document.forms0.myName.value;/var Name = document.myForm1.elements0.value;/var Name = document.formsmyForm1.elements0.v

4、alue;/var Name = document.formsmyForm1.myName.value; alert(Name);文档中对象的引用方法三function btClick2()/获取名为myForm2的对象下的mySex的值var sex = document.myForm2.mySex.value;/也可以使用以下方法/var sex = document.forms1.elements0.value;/var sex = document.forms1.mySex.value;/var sex = document.myForm2.elements0.value;/var s

5、ex = document.formsmyForm2.elements0.value;/var sex = document.formsmyForm2.mySex.value; alert(sex);文档对象的应用在网页中输出内容输出非HTML文档其他文档信息在网页中输出内容9-2在网页中输出文字 document.write( 使 用 write() 方 法 ); document.write(产生的文字);/document.writeln(使用writeln()方法);/document.writeln(产生的文字);输出非HTML文档一9-3输出非HTML文档输出非HTML文档二fun

6、ction outHTML()var htmlWin = window.open(,myHTML); htmlWin.document.open(text/html); writeText(htmlWin);function outText()var textWin = window.open(,myText); textWin.document.open(text/plain); writeText(textWin);输出非HTML文档三function writeText(myWin)myWin.document.writeln(); myWin.document.writeln(); m

7、yWin.document.writeln(); myWin.document.writeln( 新 开 文 档 ); myWin.document.writeln(); myWin.document.writeln(); myWin.document.writeln(); myWin.document.writeln(); myWin.document.writeln(这是使用JavaScript创建的网页。); myWin.document.writeln(); myWin.document.writeln() myWin.document.writeln();文档加载状态一9-4其他文档

8、信息文档加载状态二 var nowState = setInterval(setState(),100); function setState()state = document.readyState; switch (state)case uninitialized:document.title = 还没有开始加载文档; break;case loading:document.title = 文档加载中;break; case interactive:document.title = 加载的文档已经可以和用户进行交互了; break;case complete:document.title

9、= 文档加载完毕; clearInterval(nowState);break;图像对象 图像对象介绍 图像对象的属性 图像对象的 显示图片的信息 置换图片 随机图片图像对象介绍image对象，又称为图像对象。在HTML文档里可能会存在多张图片， JS在加载HTML文档时就会自动创建一个images数组，数组中元素的个数由标签决定。JS为每一个标签在images数组中创建一个元素。因此，images数组的每一个元素都代表着HTML文档中的一张图片，通过对images数组的引用，可以达到引用图片的目的。Images数组中元素的引用document.imagesidocument.imagesim

10、ageName document.imageName图像对象的属性属性说明src该属性可以返回或设置图片的URL，初始值由img元素的src属性值决定name该属性返回图片的名称，其属性由img元素的name属性值所决定height图片的高度，单位为像素width图片的宽度，单位为像素border图片边框的宽度，单位为像素complete返回一个布尔值，说明图片是否加载完毕。如果加载图片发生错误或者用户取消图片加载，也会返回true。hspace图片与文字在水平方向的距离，单位为像素vspace图片与文字在垂直方向的距离，单位为像素lowsrc低分辨率显示图片显示图片的信息9-5 docume

11、nt.write(图片的属性如下所示：);document.write(图片名称为：,,); document.write(图片的宽度为：,document.images0.width,); document.write(图片的高度为：,document.images0.height,); document.write(图片的边框为：,document.images0.border,); document.write(图片与文字水平方向的间距为：,document.images0.hspace,);document.write(图片与文字垂直方向的间距

12、为： ,document.images0.vspace,);document.write(图片的URL为：,document.images0.src,); document.write(该图片的低质量图片为：,document.images0.lowsrc,);/body置换图片一置换图片第1章 JavaScript基础第2章 常量、变量与数据类型第3章 表达式与运算符置换图片二9-6 function changeImg(imgName)document.imagesimgName.src=img/article2.gif;function resetImg(imgName)document

13、.imagesimgName.src=img/article1.gif;随机图片function changeImg()9-7/设置随机数var ran = Math.random();/由于random()方法产生的是0到1之间的随机数，所以将其乘 以10，后再取整，就可以得到0到10之间的数ram = Math.round(ran*10);/将图片地址存在数组中var arr =img/img01.jpg,img/img02.jpg,img/img03.jpg,img/img04.j pg,img/img05.jpg,img/img06.jpg,img/img07.jpg,img/img

14、08.jpg,img/img09.jpg,img/img10.jpg,img/flower.jpg;document.images0.src = arrram;setInterval(changeImg(),1000);链接对象 链接对象介绍 链接对象的属性 链接对象的 查看一个网页上的所有超链接链接对象介绍link对象，又称为链接对象。在HTML文档里可能会存在多个链接， JS在加载HTML文档时就会自动创建一个links数组，数组中元素的个数由标签和决定。JS为每一个链接在links数组中创建一个元素。因此， links数组的每一个元素都代表着HTML文档中的一个链接。links数组中元素

15、的引用document.linksi链接对象的属性属性说明href返回或设置link对象中完整当然URL部分target返回或设置link对象中超链接目标打开的窗口，相当于A元素target属性text适用于Netscape，返回link对象中超链接的描述文字，相当于标签之间的文字textContent适用于Netscape，返回和设置link对象中超链接的描述文字，相当于标签之间的文字innerText适用于IE，返回和设置link对象中超链接的描述文字，相当于标签之间的文字innerHTML返回和设置link对象中超链接的描述文字，相当于标签之间的文字链接对象的属性9-8链接对象的属性原始

16、超链接说明文字alert(document.links0.text); alert(document.links0.textContent); alert(document.links0.innerText); alert(document.links0.innerHTML);/ff可用，只读/ff可用，可读写/ie可用，可读写/都可用，可读写查看一个网页上的所有超链接sample01.htmsample02.htmsample03.htmsample04.htmsample05.htm document.write(本页中所包含的超链接有：); for(i=0;idocument.links

17、.length;i+)document.write(document.linksi.href,); document.linksi.target = _blank;9-9锚对象 链接对象介绍 锚对象属性name 锚对象与链接对象的区别链接对象百度锚对象百度 /定义锚对象百度/该标签用于跳转到锚对象所在位置链接对象实现页面的打开或重载锚对象类似word里的书签，在网页上做了一个标签 创建文档索引链接对象介绍anchors对象，又称为锚对象。只有在标签中设置name属性才可以创建一个锚。在加载HTML文档时，JS 就会自动创建一个anchors数组，数组中的元素个数由HTML文档中锚个数所决定。Js会将每一个锚都以anchors对象的形式存放在anchors数组中。 anchors数组中每一个元素所代表的就是HTML文档中中的每一个锚。Anchors数组中的元素引用方法document. anchorsi创建文档索引一9-10第1章 JavaScript基础脚本语言的介绍 JavaScript的作用JavaScript的版本与支持第2章 常量、变量与数据类型常量 变量基本数据类型第3章 表达式与运算符表达式 操作数运算符介绍第4章 流程控制语句表达式语句 语句块选择