<script type="text/JavaScript"> alimama_pid="mm_10870591_922701_1909023"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="11"; alimama_width=760; alimama_height=90; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script>
var elementNode = document.getElementById(“id");
用带兔子的新照片替换原有图片的办法如下:
创建新的img元素
访问当前img元素的父元素,也就是它的容器
在已有img元素之前插入新的img元素作为该容器的子级
删除原来的img元素
结合起来以便在用户单击按钮时调用刚刚创建的函数
var newImage = document.createElement("img");
可以创建一个新的元素节点,元素名为img。在HTML中基本上就是:
下面需要增加一个属性src,它指定了要加载的图片:
newImage.setAttribute("src", "rabbit-hat.gif");
注:如果对已有的属性调用setAttribute(),则把原来的值替换为指定的值。
现在有了要插入的图片,还需要找到插入的地方。但是不能将其插入到已有
var imgParent = hatImage.parentNode;
insertBefore(newNode, oldNode)
appendChild(newNode)
把新图片元素插入到原有图片之前:
imgParent.insertBefore(newImage, hatImage);
现在原图片的父元素有了两个 子元素:新图片和紧跟在后面的旧图片
imgParent.removeChild(hatImage);
完整的JavaScript函数:
imgParent.replaceChild(newImage, hatImage);
2、直接修改图片的src属性
hatImage.setAttribute("src", "rabbit-hat.gif");
3、使用HTML DOM方法
hatImage.src = “rabbit-hat.gif”;
下面我们所举的例子是一个很简单的程序,我们的目标就是把以前所学的
javascript及dom综合做一个例子,加深印象。
DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页,
下面代码
显示一个普通的旧式大礼帽,还有一个标记为 Hocus Pocus! 的按钮
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片9.png)
n
注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮,单击该按钮
将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮,可以把
JavaScript 函数和它连接起来与浏览器交互而无需提交表单。
效果如下:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片1.png)
下面增加一些魔法,点击按钮用兔子的图片替换页面中原有的图片 :
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片2.png)
首先找到网页中表示img元素的DOM节点。一般来说,最简单的办法是用
getElementById()方法,它属于代表Web页面的document对象:
var elementNode = document.getElementById(“id");
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片3.png)
完成所需修改有两种方法:一种简单,一种麻烦。但是运用较麻烦的办法是
一次很好的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函数:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片4.png)
每当用户点击Hocus Pocus!按钮的时候运行showRabbit()函数。为此只要向
HTML中增加一个简单的 onclick事件处理程序即可:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片5.png)
思考:替换图片更简单的办法
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(),下面做一些修改,当用户再次点击按钮时把兔子藏起
来!
使用我们熟悉的方法,实现这个简单的功能:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片6.png)
基本上和放兔子出来完全相反,将图片的src属性再改回旧图片。创建一个新
的 JavaScript 函数来完成这项任务:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片7.png)
现在虽然按钮的标签改变了,但是单击按钮时的动作没有变。当用户单击按
钮时可以使用DOM改变事件或者发生的动作。在JavaScript中,可以通过按
钮的onclick属性来引用该事件,因此可以改变按钮触发的事件:只要赋给
onclick属性一个新的函数。
![](https://p-blog.csdn.net/images/p_blog_csdn_net/tzd_java/图片8.png)