JavaScript程序设计教程 第7章 document对象.pdf

O第7章document对象OOOO7.1document对象概述7.2document对象属性7.3document对象方法OO7.4 document对象集合Oo7.5与Window对象区别oo 7.6实战oo7.7小结ooo7.1 document对象概述在浏览器中，与用户进行数据交换都是通过客户端的 JavaScript代码来实现的，而完成这些交互工作大多数是 document对象及其部件进行的,因此document对象是一个比较 i重要的对象。document对象是文档的根节点，window,document属性就指。向这个对象。也就是说，只要浏览器开始载入H T ML文档，这个对 i象就开始存在了，可以直接调用。document.childNodes属性返回该对象的所有子节点。对于 q H T ML文档来说，document过象一般有两个子节点。第1个子节点；是document,doctype,表示文档类型节点(DocumentT ype)。对于H T ML5文档来说，该节点就代表QDOgqPE html；第2个子 节点是document.documentE lement,表示元素节点(E lement)，代表html lang=en”。o7.2 document对象属性document对象定义了如下属性：document,title：设置文档标题，等价于印1的 标签；document.bgColor：设置页面背景色；document.fgColor：设置前景爸（文本颜色）；document.linkColor：未单击过的链接颜色；document.alinkColor：激活链接（焦点在此链接上）的 颜色；Oo document.vlinkColor：已单击过的链接颜色；:document.UR L：设置UR L属性从而在同一窗口打开另一网页；document,location：等价于属性UR L；document.referrer：支希欣UR L,包含把浏览器带到当前文 上 档的链接（如果存在这样的链接）；document.lastModified：一个字符串，包含文档的修改日:期；document,cookie：设置和读出cookie；document,charset：设置字符集，简体中文为gb2312。Oo使用document对象属性可以访问文档中的对象、内容等。其中某些对象或内容还可以使用document对象属性来设置。t 1.颜色设置document对象的bgCo 1 or属性、fgCo 1 or属性、linkColor 属性、alinkColor属性和vlinkColor属性分别指定了文档的背 2景颜色、文本颜色和链接颜色。这些属性的运用如脚本7-1所示QOQovTITLEdocuments 又寸象属，性 v/TITLEvdiv页面背景色为：vdiv前景色（文本色）为：vdiv未单击过的链接颜色为:vdiv激活的链接颜色为:vdiv已单击过的链接颜色为:未单击的链接 http:/ https:/ http:/document.bgColor=#CCCCCC;document.fgColor=#666633;document.linkColor=#3333FF;document.alinkColor=#CC66FF;document.vlinkColor=#FFOOOO;Q脚本71html运行脚本显示结果如图7.1所示。页面背景色为：前景色（文本色）为：未单击过的链接颜色为：激活的链接颜色为：已单击过的链接颜色为：未单击的链接 http:www.ryjiaoyuom/激活的链接 https:/ document对象颜色属性ooo.2.文档修改时间在JavaScript中，为document对象定义了 lastModified属 性，使用该属性可以得到当前文档最后一次被修改的具体日期 和时间。本地计算机上的每个文件都有最后修改的时间，所以 在服务器上的文档也有最后修改的时间。当客户端能够访问服 T务器端的该文档时，客户端就可以使用lastModified属性来得 占到该文档最后的修改时间。脚本7-2显示的是当前文档最后一次 的修改时间。OovTITLEdocuments 又寸象属，性 v/TITLEalert（“文档最后修改日期：+document.lastModified）;Q脚本72.htmloQ运行脚本7-2显示结果如图7.2所示。从显示结果中可以看出，使用lastModified属性得到的 日期和时间并不是一个Date对象，而是一个字符串。这里显示的日期和时间的格式是固定的，要想得到想要的日期和时间格式，需要运用Date对象来转换。此网页显示：文档最后修改日期：04/23/2017 18:30:15禁止此天再显示对话框。确定图7.2 document对象lastModified属性oQL 3.文档标题JavaScript为document对象定义了 title属性来获得文档的?标题。在H T ML文件中标签中定义的就是文档的 1标题。标记在H T ML中可以省略，但是文档的标 题仍然存在，只是为空。OOQo 4.文档定位文档定位就是设置和获取文档的位置，文档的位置也可以说 是文档的UR L。在JavaScript中，为document对象定义了location、UR L referrer这3个属性来对文档的位置进行操作。其中location属 性和UR L属性很相似，都可以直接获取文档位置。而referrer属 性则不同，使用它获得的是当前文档的源文档的UR L,也就是说 获得由哪一个文档引出该文档。从这一点可以看出，如果只编写 9 一个文档时不可能得到referrer的属性值。脚本7-3中分别使用 1 location属性和UR L属性对文档进行定位。QvTITLE 文档定位 v/TITLE文档定位力1var ustring=document.URL;var sstring=document.location;document.write(vh3使用location属T生得至的URL为：”document.write(sstring);document.writejvh3使用URL属性得到的URL为：”)；document.write(ustring);document.location=http:/www.ryj i aoy u.co m;脚本73.htmloT 使用浏览器运行该脚本，在页面上首先出现了文档的UR LL，然后由于程序中使用location属性新设置了UR L,所以文档 转向了新设置的UR L。使用location属性和UR L属性都可以得到文档的位置。但2 是它们的表现形式不同，使用UR L属性得到的是真实显示的UR L，而location属性得到的UR L中会将空格等特殊字符转换成码9 值的形式来显示，这样更容易在网络中传输。另外使用1 location属性不但可以获取文档的UR L,还可以对文档的UR L进行设置。Oo 7.3 document对象方法 document对象定义了4个关键方法，如下所示。close()：关闭或结束open。方法打开的文档；:open。：产生一个新文档，擦掉已有的文档内容；.write。：把文本附加到当前打开的文档；WD writein()：把文本输出到当前打开的文档，并附加一个换行 I 符。其中，write()方法是document对象的一个最重要的特 性，在前面章节也已经使用过write。方法。write。方法可?以从JavaScript程序中动态地生成网页的内容，一般直接在A 脚本中使用，把H T ML内容输入到当前正在被解析的文档中。如脚本7-4所示，使用write()方法显示当前日期和文档的最 后修改日期。ovTITLEdocuments 又寸象方;去 v/TITLEvar current=new Date();document.write(当前日期:+current.toString()+);document.write(”文档最后修改日期:+document.lastModified);Q脚本7.4.html运行脚本显示结果如图7.3所示。只能在当前文档正在被解析时使用write()方法向其输 出H T ML代码。简而言之，就是只能在标记script中调用方 法document,write(),因为这些脚本在执行时是文档解析过 程的一部分。如果是从一个事件处理程序中调用document.write(),那么一旦文档被解析，该处理程序被调用，结果将会覆盖 当前文档(包括它的事件处理程序)，而不是将文本添加到 其中。当前日期：Sat Apr 22 2017 20:29:03 GMT+0800(中国标准时间)文档最后修改日期：04/22/2017 20:29:03图7.3 document对象write方法结果1o7 在使用write()方法向文档中输入内容时，如果同时具有字符串和非字符串内容，通常会使用号运算符连接起来，如脚本7-4中的内容。其实不需要这样，write。方法具有多 参数形式，可以将每个内容作为一个参数，参数之间用逗号分 隔，再向文档输入时，就会依次输入。此外，write。方法向 文档输入字符串时，也可以在其中加入一些H T ML标记，如脚本 7-5中的03标记。在文档中显示时，是不会显示这些标记的,它们会在文档中发挥自身的作用。QvTITLEdocuments 又寸象方;去 v/TITLEvar current=new Date();document.write(vh3documents 又寸象 write 方法 v/h3”)；document.write(当前日期：”,current.toString()Jv/br”)；document.wHte(文档最后修改日期:”,document.lastModified);Q脚本75.htmloO运行脚本显示结果如图7.4所示。Odocuments 对象 write 方法 当前日期：Sat Apr 22 2017 21:49:20 GMT+0800（中国标准时间）q 文档最后修改日期：04/22/2017 21:49:20o图7.4 document对象write方法结果2oO document对象的open()方法和close()方法分别用来打开 和关闭文档。打开文档方法与Window对象的打开窗口 open()方 法不同，打开窗口会在窗口和浏览器中创建一个对象，而打开 文档只要向文档写入内容。打开文档要比打开窗口节省很多资 源。使用open。方法来打开一个文档，原来的文档内容就会被 自动删除，然后重新开始输入新内容。使用close。方法来关&闭一个文档，在输入新内容结束后，如果不关闭文档，就有可 能造成无法显示oOo7.4 document对象集合O document对象指向特定元素集合的属性有如下几个。；document,anchors ：A nchor对象的一个数组，代表文档中的 锚。d document.applets：A pplet对象的一个数组，代表文档中的 Java小程序。I document,forms ：Form对象的一个数组，代表文档中所有 的form元素。j document,images：I mage对象的一个数组，代表文档中所有 的img元素。document.links：Link对象的一个数组，代表文档中的超文9 本链接的Link对象。OOOOOOO1.表单document对象的forms属性是Form对象的一个数组,用 来对文档中的表单进行操作。Form对象代表H T ML表单，由 标记对构成，JavaScript运行引擎会自动为每一个表 单标记建立一个表单对象。Form对象包含一个elements数组,elements 口数组中的每个元素用于表示表单元素的值。Form对象及其子对象的关系如图7.6所示。圣。-系-3分Q图7.6 Forms对象架构oQO使用forms属性可以得到文档中所有表单的数组，使用数 组的length属性可以得到表单的个数，使用数组下标可以得到 特定的表单。在实际混用中，通常都会为每个表单定义名称。除了可以 使用数组的索引外，还可以直接使用表单名称属性来得到特定 的表单。Q.2.图像在JavaScript中，为document对象定义了 images属性来对 T文档中的图像进行操作。images属性得到的是文档中的图像数;组，同样也是能够通过数组的length属性来获得文档中图像的 数量，使用数组下标可以获得每个图像。在对图像进行操作时。，如果图像定义了名称，还可以使用名称索引得到该图像。i 和其他对象不同的是，当文档中没有图像时，使用images属性也能得到一个数组，其数组的长度为0,因此使用images9属性后还可以作为布尔值进行使用。OQoo图像集合的相关操作如下。(1)通过集合引用。document,images document,images,length document,images0 document,imagesi对应页面上的img标签 对应页面上img标签的个数第1个img标签第i-1个img标签(2)通过name属性直接引用。img name=oI mage”document,images,olmage/document,images,name属性o?(3)引用图片的src属性。o document,images,olmage.src/document,images,name属性 src(4)创建一个图像。o var olmageolmage=new I mage()document,images,olmage.src=/1 jpg同时在页面上建立一个img标签与之对应就可以显示图?片。如脚本7-8通过引用图片的src属性给img添加图片。Oovtitlelmage集合 v/titlevar olmageolmage=new lmage()document.images.olmage.src=http:/ document对象图像o 3.锚点和超链接JavaScript中的锚点对象是文档对象的一个属性，它通 A 常以数组的形式表示网页中所有的锚点。anchors数组中包含 了文档中定义的所有的锚点a-/a标记，可以通过该 数组来访问和查找某个锚点。anchors数组中存储锚点的顺序3 是以锚点在文档中出现的顺序存储的，该数组的下标是从0开始。?JavaScript中的链接对象也是以数组形式表示网页中所有的A链接标记（包含href属性的a标记和map标记段里的area）标 记），按照在文档中的次序，从0开始给每个连接标记定义了一o个下标。如果一个a标记既有name属性，又有href属性，则它 1既是一个A nchor对象，又是一个Link对象。在对这些文档对象数 组进行操作时，可以使用以前学过的数组知识。如数组的length 属性来求数组的长度。单个A nchor对象没有属性；单个Link对象 有属性。Oo anchor s数组常用的属性如下。(1)length属性。该属性用来获取文档中锚点的总数，语法 如下：number=document,anchors,lengthnumber：用来存储文档中锚点的总数，number为可选项。(2)name属性。该属性用来获取某一个锚点的name参数值，语法如下：gName=document,anchors,name?gName：用来存储某一个锚点name参数的值，为可选项。i(3)id属性。该属性用来获取锚点的id参数值，语法如下：gid=document,anchors,idgid：用来存储锚点id参数的值，gid为可选项。Links数组常用的属性有如下几个。(1)hash属性。该属性用来获取超链接UR L中的锚标记的部分并包含符号，语法如下：anchor=1inksn.hashanchor：字符串变量，用来存储超链接UR L中锚标记，anchor 是可选项。(2)host属性。该属性用来获取超链接UR L中的主机名称和?端口号，语法如下：&nameNumber=1inksn.hostnameNumber：字符串变量，用来存储超链接UR L中的主机名称 q和端口号，nameNumber是可选项。1(3)hostname属性。该属性用来获取超链接UR L中的主机名称，语法如下：name=1inksn.hostnamename：字符串变量，用来存储超链接UR L中的主机名称和端口 号，name是可选项。(4)href属性。该属性用来获取完整的超链接UR L,语法如下O:url=linksn.hrefurl：字符串变量，用来存储完整的超链接UR L,url是可选项O(5)pathname属性。该属性用来获取超链接UR L中的路径名部，语法如下：urlName=1inksn.pathnameurlName：字符串变量，用来存储路径名的部分，urlName是可 选项。?(6)port属性。该属性用来获取超链接UR L中的端口号，语法如下：number=1inksn.portnumber：字符串变量，用来存储端口号，number是可选项。o(7)protocol属性。该属性用来获取超链接UR L中的协议部分并包括结尾处的“：”冒号，语法如下：I confer=1inksn.protocol confer：字符串变量，用来存储协议部分，confer是可选项。(8)search属性。该属性用来获取超链接UR L中条件部分并包 括问号，语法如下：terminiinksn.searchterm：字符串变量，用来存储条件部分，search是可选项。?(9)target属性。该属性用来获取链接的目标窗口打开方式1，语法如下：mode=1inksn.targetmode:字符串变量，用来存储窗口打开方式，其打开方式主要 有4个属性。7.5与Window对象区别简单来说，document是Window的一个对象属性。每个Window对象都有document属性。该属性引用表示在窗口中显 9 示的H T ML文档的document对象。）如果文档包含框架（frame或iframe标签），浏览器会为 H T ML文档创建一个Window对象，并为每个框架创建一个额外 的Window对象。!Window对象和document对象区别在于以下两点。（1）Window指窗体。document代表浏览器窗口中的文档，可 o以理解为页面。document是Window的一个子对象。1（2）用户不能改变document.location（因为这是当前显示文档的彳立置）。但是，却可以改变window.location（用其他 文档取代当前文档）。window,location本身也是一个对象，而document,location不是对象。7.6实战。【案例7-11 仿LE D跑马灯效果1.案例描述o 使用JavaScript实现仿LE D跑马灯效果。o 2.实现思路(1)首先利用html和css创建LE D跑马灯背景及文字内容；(2)然后将外层div对象的宽度和文字对象宽度进行比较,设置定时文字向左循环移动。3.实现代码运行结果如图7.9所示。图7.9跑马灯效果示例O O O 0 7.7小结T 本章介绍了document对象的核心特性，几乎所有启用JavaScript对象的浏览器都能实现document对象。document 对象提供给客户端交互访问静态文档的内容的能力。不仅能。获得文档整体信息，还能获取文档具体内容信息。!例如forms 数组存放Form对象表示文档中的所有表单，images数组存放I mage对象表示文档中的图像，links和?anchors 数组表示文档中的锚点和超链接。这些数组和它们 1存放的对象使客户端JavaScript程序创造了各种可能性。下一章将会针对forms 数组做详细介绍。O