AJAX控制DOM结点

 看过一篇文章,其中讲到用AJAX来操作DOM结点,其实自己也不是很明白,他提供了源码的一个实例,可弄下来怎么都不对,研究了半天最后修改出个能用的,给大家看看,呵呵,很简单,捕获头两级HTML结点并删除一个IMAGE结点.

 

< html >
  < head >
   < title > JavaScript and the DOM </ title >
   < script  language ="JavaScript" > ...
   function test() ...{
    
    var myDocument = document;
    var htmlElement = myDocument.documentElement;
   
    alert("The root element of the page is " + htmlElement.nodeName);
   
    var headElement = htmlElement.getElementsByTagName("head")[0];
    if (headElement != null) ...{
      alert("We found the head element, named " + headElement.nodeName);

         
    
      var titleElement = headElement.getElementsByTagName("title")[0];
    
      if (titleElement != null) ...{
        
        var titleText = titleElement.firstChild;
        
        //alert("The page title is " + titleText.nodeName);
    
      }
  
      var bodyElement = headElement.nextSibling;
      while (bodyElement.nodeName.toLowerCase() != "body") ...{
        bodyElement = bodyElement.nextSibling;
      }   

      if (bodyElement.hasChildNodes()) ...{
        for (i=0; i<bodyElement.childNodes.length; i++) ...{
          var currentNode = bodyElement.childNodes[i];
          if (currentNode.nodeName.toLowerCase() == "img") 
      ...{
        
            bodyElement.removeChild(currentNode);
          }
        }
      }
    }
  }
   </ script >
  </ head >
  < body >
   < p > JavaScript and DOM are a perfect match. 
     You can read more in  < i > Head Rush Ajax </ i > . </ p >
   < img  src ="http://www.headfirstlabs.com/Images/hraj_cover-150.jpg"   />
   < input  type ="button"  value ="Test me!"  onClick ="test();"   />
  </ body >
</ html >