Ajax学习笔记(1)------关于DOM的代码

多个方法做图片交换：

1. < html >
2.   < head >
3.    < title > Magic Hat </ title >
4.   
5.    < script   language = "javascript"   >
6.   function showRabbit1() {
8.   var  hatImage = document .getElementById("topHat");
9.   var  newImg = document .createElement("img");
10.   newImg.setAttribute("src","images/rabbit-hat.gif");
11.   var  imgParent = hatImage .parentNode;
12.   
13.   //两步完成
14.   imgParent.insertBefore(newImg,hatImage);
15. imgParent.removeChild(hatImage);
17.  var  buttonEmement = document .getElementByTd("hocusPocus");
18. button.setAttribute("value", "Get back in that hat!");
20.   
21. }  
22.  function showRabbit2() {
24.   var  hatImage = document .getElementById("topHat");
25.   var  newImg = document .createElement("img");
26.   newImg.setAttribute("src","images/rabbit-hat.gif");
27.   var  imgParent = hatImage .parentNode;
29.  //一步完成,第一种
30.   imgParent.replaceChild(newImg,hatImage);
31.   var  buttonEmement = document .getElementByTd("hocusPocus");
32. button.setAttribute("value", "Get back in that hat!");
34.   
35. }  
36.    function showRabbit3() {
38.             var  hatImage = document .getElementById("topHat");
39.             hatImage.setAttribute("src","images/rabbit-hat.gif");
40.             var  buttonEmement = document .getElementById("hocusPocus");
41.             buttonEmement.setAttribute("value", "Get back in that hat!");
43.              buttonEmement.onclick = hiddenRabbit ;
44.   
45.             } 
46.     function hiddenRabbit(){
47.             var  hatImage = document .getElementById("topHat");
48.             hatImage.setAttribute("src","images/topHat.gif");
49.             var  buttonEmement = document .getElementById("hocusPocus");
50.             buttonEmement.setAttribute("value", "Hocus Pocus!");
52.              buttonEmement.onclick = showRabbit3 ;
53.             } 
55.    </ script >
56.   </ head >
58.   < body >
59.    < h1   align = "center" > Welcome to the DOM Magic Shop! </ h1 >
60.    < form   name = "magic-hat" >
61.     < p   align = "center" >
62.      < img   src = "images/topHat.gif"   width = "300"   height = "225"   id = "topHat"   />
63.      < br   />
64.      < br   />
65.      < input   type = "button"   id = "hocusPocus"   value = "Hocus Pocus!"   onClick = "showRabbit3();"   />
66.      
67.     </ p >
68.    </ form >                                                                      
69.   </ body >
70. </ html >