AJAX学习------基于DOM的Web应用程序示例

 

下面我们所举的例子是一个很简单的程序，我们的目标就是把以前所学的

javascript及dom综合做一个例子，加深印象。

DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，

下面代码显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮

 

n

注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮

将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把

 

JavaScript 函数和它连接起来与浏览器交互而无需提交表单。

效果如下:

 

下面增加一些魔法，点击按钮用兔子的图片替换页面中原有的图片 :

 

 

首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用

getElementById()方法，它属于代表Web页面的document对象：

var elementNode = document.getElementById(“id");

完成所需修改有两种方法：一种简单，一种麻烦。但是运用较麻烦的办法是

一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新分析一

下看看有没有更简单的办法。

用带兔子的新照片替换原有图片的办法如下：

创建新的img元素

访问当前img元素的父元素，也就是它的容器

在已有img元素之前插入新的img元素作为该容器的子级

删除原来的img元素

结合起来以便在用户单击按钮时调用刚刚创建的函数

创建新的img元素：

var newImage = document.createElement("img");

可以创建一个新的元素节点，元素名为img。在HTML中基本上就是：

 

<img />

下面需要增加一个属性src，它指定了要加载的图片：

newImage.setAttribute("src", "rabbit-hat.gif");

注：如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。

 

但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供

 

的值增加一个属性

现在有了要插入的图片，还需要找到插入的地方。但是不能将其插入到已有

 

的图片中，而是要将其插入到已有图片之前然后再删除原来的图片。为此需

 

要知道已有图片的父元素：

var imgParent = hatImage.parentNode;

添加子节点的方法：

insertBefore(newNode, oldNode)

appendChild(newNode)

把新图片元素插入到原有图片之前：

imgParent.insertBefore(newImage, hatImage);

现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片

因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除

的节点传递给它即可：

imgParent.removeChild(hatImage);

完整的JavaScript函数：

 

每当用户点击Hocus Pocus!按钮的时候运行showRabbit()函数。为此只要向

HTML中增加一个简单的 onclick事件处理程序即可：

思考：替换图片更简单的办法

1、使用replaceNode()函数

imgParent.replaceChild(newImage, hatImage);

2、直接修改图片的src属性

hatImage.setAttribute("src", "rabbit-hat.gif");

3、使用HTML DOM方法

hatImage.src = “rabbit-hat.gif”;

虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus!

和调用 showRabbit()，下面做一些修改，当用户再次点击按钮时把兔子藏起

来！

使用我们熟悉的方法，实现这个简单的功能：

 

基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新

的 JavaScript 函数来完成这项任务：

现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按

钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按

钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给

onclick属性一个新的函数。