软件学堂

网游分类软件分类

使用DoM实现控件的替换

2012-11-11 来源:网络

【实例名称】

使用DoM实现控件的替换

【实例描述】

本铡实现两个div内元素互换,主要依靠DOM的“replaceChild”方法。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script type="text/javascript"> function test()     {         var mydom1=document.getElementById("divlist1"); //获取指定ID的DOM对象         var mydom2=document.getElementById("divlist2"); //获取指定ID的DOM对象         mydom1.replaceChild(mydom2.firstChild,mydom1.firstChild);     } </script>

</head> <body> <form id="form1" runat="server">       <input id="btn1" type="button" value="test" onclick="test()"/>       <div id="divlist1"><p>this is test1</p></div>       <div id="divlist2"><p>this is test2</p></div>     </form>

</body> </html>

 

【运行效果】

                                          初始运行效果

使用DoM实现控件的替换运行效果

                                         替换后的效果

使用DoM实现控件的替换运行效果

【难点剖析】

替换节点需要使用DOM中的“replaceChild”方法。需要注意的是此代码的运行结果是“mydoml”中的元素被替换了,而“mydom2”的元素就没有了,“replaceChild”方法相当于转移。

【源码下载】

为了JS代码的准确性,请点击:使用DoM实现控件的替换 进行本实例源码下载 

上一篇:使用userData保存checkbox标记
下一篇:PhotoShop利用历史记录画笔磨皮法教程

相关文章