JavaScript DOM基础：操作图像与表单元素

DOM基础与图像对象操作

在掌握计算机编程基础知识后，我们将深入探讨文档对象模型（Document Object Model，简称DOM）。DOM的层级结构始于窗口对象，每个窗口内包含一个文档对象。本节将聚焦于文档对象，展示如何从中获取用户信息并动态呈现新内容。

此前我们已接触过文档对象的一个属性——图像数组（Images array）。在第3课中，文档内的第一张图像可以通过修改其src属性进行替换。

示例如下：

window.document.images[0].src='some_new_picture.gif';

上述命令会将文档中的第一张图像替换为名为some_new_picture.gif的新图像。在DOM结构中，图像数组内的每张图像均被视为独立对象。因此，images[0].src的运作方式与对象属性访问一致：它从窗口中调用文档（document）属性，再从文档的图像数组中提取第1幅图像，并将其src属性设置为图像some_new_picture.gif。

Image对象还具备其他多种实用属性，例如在JavaScript执行其他操作前检查图像是否已完全加载。但这些属性将在后续课程中详细讨论。本节课我们将重点介绍反馈表单及其在JavaScript中的应用。

JavaScript与反馈表单交互

反馈表单是HTML 1.0规范的一部分，但许多开发者对其了解有限。许多人误以为它仅用于客户端CGI编程。实际上，即使不具备CGI编程能力，反馈表单也能提供丰富功能。JavaScript可为反馈表单添加多种交互特性，且无需依赖客户端CGI支持。

若你对反馈表单的工作原理尚不熟悉，建议先学习HTML入门相关课程，然后再继续学习本课内容。

首先，在JavaScript中，反馈表单同样存储于对象数组中。你可以通过window.document.images[0]调用图像数组中的第一张图像，同样可以使用window.document.forms[0]调用反馈表单数组中的第一个表单。你可以为图像命名，也可以采用类似方式为反馈表单命名。例如，如果该反馈表单

的编程代码如下：

<form name="first_form"> <input type="text" name="first_text" size="40" value="Power to the primates!"> </form>

你可以通过以下两种方式来引用该表单：

var the_form = window.document.forms[0]; var the_same_form = window.document.first_form;

在实际应用中，你通常需要引用表单内的具体元素，例如上述示例中的文本域。

将鼠标滑过该链接，观察发生的现象。

Yes, and I know it. No!

通过更改文本域的值，即可实现这种动态变换效果。

动态修改文本域与文本区域值

<form name="second_form"> <input type="text" name="first_text" value="Are you happy?"> </form>

将文本域的链接修改为：

<a href="#" onMouseOver="window.document.second_form.first_text.value='Clap clap!';">Yes, and I know it.</a>

<a href="#" onMouseOver="window.document.second_form.first_text.value='Sour puss!';">No!</a>

上述代码表示调用第一个表单，并将其值设置为'Clap clap!'。第二行代码作用类似。这与修改图像的src属性非常相似，不同之处在于文本域修改的是value属性。

对textareas也可以采用类似的方法改变值：

Part 1 Part 2

表单编码示例：

<form name="third_form"> <textarea name="the_textarea" rows=10 cols=60> Mouse over below to see the first verse of The Webmonkey song, adapted from "I Wanna Be Like You" (The Monkey Song) from Walt Disney's The Jungle Book written by Richard M. Sherman and Robert B. Sherman </textarea> </form>

请注意，该表单具有名称third_form，且文本区也具有名称the_textarea。

其链接和文本域的设定方法与前述基本相同：

<a href="#" onMouseOver="window.document.third_form.the_textarea.value=first_part;">Part 1</a> <a href="#" onMouseOver="window.document.third_form.the_textarea.value=second_part;">Part 2</a>

唯一的区别在于，此处是将一个变量赋值给textareas，而非直接赋值字符串。该变量已在HTML头部定义。

以下是变量的字符串赋值代码：

var first_part = "Now I'm the king of the swingers\nOh, the jungle VIP\nI've reached the top and had to stop\nAnd that's what botherin' me";

注意"\n"代表换行符。若在<pre>标签或textarea中输入内容，使用"\n"换行符将非常便捷。

除了修改表单元素的值，JavaScript还允许你检测表单中发生的事件。下一讲将对此进行详细介绍。