黑马程序员技术交流社区

标题: js document 的replace方法 [打印本页]
作者: 杨杨    时间: 2013-3-8 15:53
标题: js document 的replace方法
本帖最后由 杨杨 于 2013-3-11 08:26 编辑
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>form.html</title>
  5.         
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.   </head>
  10.   
  11.   <body>
  12.             
  13.            <form name="form1" action="test.html" method="post" >
  14.                        <input type="text" name="tname" value="国庆六十周年_1"  id="tid_1"  >

  16.                   <input type="text" name="tname" value="国庆六十周年_2"  id="tid_2"  >

  18.                   <input type="text" name="tname" value="国庆六十周年_3"  id="tid_3"  >

  20.                   <input type="button" name="ok" value="保存1"/>
  21.              </form>
  22.            
  23.           您喜欢的城市:

  25.            <ul>
  26.                     <li id="bj" value="beijing">北京</li>
  27.                  <li id="sh" value="shanghai">上海</li>
  28.                  <li id="cq" value="chongqing"> 重庆</li>
  29.            </ul>
  30.          
  31.           您喜欢的游戏:

  33.            <ul>
  34.                     <li id="fk" value="fangkong">反恐<p>xxx</p></li>
  35.                  <li id="ms" value="moshou">魔兽</li>
  36.                  <li id="cq" value="chuanqi">传奇</li>
  37.            </ul>   
  38.   </body>
  39.   
  40.   <script language="JavaScript">
  41. //     //获取bj节点
  42. //          var  bjElement=document.getElementById("bj");
  43. //         //获取fk节点
  44. //         var fkElement=document.getElementById("fk");
  45. //         //获取北京节点父节点
  46. //         var bjParentElement=bjElement.parentElement;
  47. //        //当点击北京节点时候替换子节点
  48. //        //替换
  49. //        bjElement.onclick=function(){bjParentElement.replaceChild(fkElement,bjElement);};
  50. //        //var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
  51. //        //var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
  52. //        alert(oldElement.getAttribute("value"));
  53.         
  54.         
  55.         document.getElementById("bj").onclick=function(){
  56.             //获取北京节点
  57.                 var bjElement=document.getElementById("bj");
  58.                   
  59.                 //获取反恐节点
  60.                 var fkElement=document.getElementById("fk");
  61.                
  62.                 //获取北京节点的父节点
  63.             var bjParentElement=bjElement.parentNode;
  64.                
  65.                 //替换
  66.                 var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
  67.                
  68.                 //测试
  69.                 alert(oldElement.getAttribute("value"));
  70.         }  



  74.   </script>
  75.   
  76.   
  77.   
  78.   
  79. </html>
复制代码
上述代码当单击北京时候被替换成反恐
上面注释的代码在ie下测试没问题
但是在火狐下面不行
没注释的在哪里都行
求解释
作者: 罗玉宁    时间: 2013-3-9 03:17
没有问题啊！
我用了注释的代码在火狐下测试没有问题
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>form.html</title>

  6. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7. <meta http-equiv="description" content="this is my page">
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9. </head>

  11. <body>

  13. <form name="form1" action="test.html" method="post" >
  14. <input type="text" name="tname" value="国庆六十周年_1" id="tid_1" >

  16. <input type="text" name="tname" value="国庆六十周年_2" id="tid_2" >

  18. <input type="text" name="tname" value="国庆六十周年_3" id="tid_3" >

  20. <input type="button" name="ok" value="保存1"/>
  21. </form>

  23. 您喜欢的城市:

  25. <ul>
  26. <li id="bj" value="beijing">北京</li>
  27. <li id="sh" value="shanghai">上海</li>
  28. <li id="cq" value="chongqing"> 重庆</li>
  29. </ul>

  31. 您喜欢的游戏:

  33. <ul>
  34. <li id="fk" value="fangkong">反恐<p>xxx</p></li>
  35. <li id="ms" value="moshou">魔兽</li>
  36. <li id="cq" value="chuanqi">传奇</li>
  37. </ul>
  38. </body>

  40. <script language="JavaScript">

  42. // //获取bj节点
  43. var bjElement=document.getElementById("bj");
  44. // //获取fk节点
  45. var fkElement=document.getElementById("fk");
  46. // //获取北京节点父节点
  47. var bjParentElement=bjElement.parentElement;
  48. // //当点击北京节点时候替换子节点
  49. // //替换
  50. bjElement.onclick=function(){bjParentElement.replaceChild(fkElement,bjElement);};

  52. </script>

  54. </html>
复制代码

111.png (39.99 KB, 下载次数: 13)

111.png
作者: 罗玉宁    时间: 2013-3-9 03:27
当然你要达到和ie下一样的效果的话还可以稍微改一下如下：
  1. bjElement.onclick=function(){

  3. var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
  4. alert(oldElement.getAttribute("value"));

  6. };
复制代码
作者: 陈丽莉    时间: 2013-3-9 12:28
如果答案满意，请回复告知，并将帖子分类改成【已解决】。
作者: 杨杨    时间: 2013-3-11 08:27
怪了我测试的就不行呢



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2