JavaScript DOM文档遍历实战(1)(3)

一个比较通用的方法：

<script type="text/javascript"> 
function text(elem){  
 var t="";  
 //如果传入的是元素，则继续遍历其子元素  
 //否则假定它是一个数组  
 elemelem=elem.childNodes || elem;  
 //遍历所有子节点  
 for(var i=0; i<elem.length;i++){  
     //如果不是元素，追加其文本值  
  //否则，递归遍历所有元素的子节点  
  t+=elem[i].nodeType !=1?elem[i].nodeValue:text(elem[i].childNodes);  
   
 }  
    //返回比配的文本  
    return t;  
}  
</script> 

用元素节点的DOM属性遍历DOM树

<script type="text/javascript"> 
window.onload=function(){  
  /*定位想要的节点*/  
  var nav=document.getElementById("nav");  
  /*查找父节点*/  
  var p_n=nav.parentNode;  
  alert("父节点的元素名称："+p_n.nodeName);  
   
  /*处理FF遍历节点中的#Text */  
  removeWhitespace(nav);//移除所有的空Text节点  
   
  /*查找子节点*/    
  var c_n_f=nav.firstChild;//第一个节点对象  
  //var c_n_f=nav.childNodes[0];//同上一样的结果  
  var c_n_l=nav.lastChild;//最后一个节点对象  
  //var c_n_l=nav.childNodes[nav.childNodes.length-1];//同上一样的结果  
  alert("第一个节点："+c_n_f.nodeName+"  "+"最后一个节点 ："+c_n_l.nodeName);   
  /*查找兄弟节点 或叫 相邻节点 */  
  /*用nextSibling和PreviousSibling必须有一个参考点，这样指针才知道自己往那里移动*/  
  var c_n_s=c_n_f.nextSibling;//第一个节点的下一个节点  
  alert("第一个节点的下一个节点："+c_n_s.innerHTML+ "n" + "节点中包含的HTML内容： "+c_n_s.nodeName);  
   
}  
</script> 

写到这里，既然标准的previousSibling，nextSibling，firstChild，lastChild，parentNode遍历方法有浏览器不兼容问题。我上面的解决方案是去掉遍历元素的相关空的#Text节点，是一个好的解决方案，但是使用起来不方便，我们何不自己写一些遍历节点的方法来代替标准的的previousSibling，nextSibling，firstChild，lastChild，parentNode。

我们的思路是利用元素是nodeType属性来判断元素是节点类型中那种节点类型，在DOM节点中我最常用的是元素节点，文本节点，属性节点，对应的类型值是元素节点nodeType=1 or ELEMENT_NODE, 文本节点 nodeType=2 or ATTRIBUTE_NODE,属性节点 nodeType=3 or TEXT_NODE,但是IE中并不支持命名常量，那就用数值吧，再配合标准的遍历属性。完全可以自己生产一些辅助函数来取代标准的遍历方式。以下一系列的辅助函数可以帮助您，他们能取代标准的previousSibling，nextSibling，firstChild，lastChild，parentNode；

<script type="text/javascript"> 
//---------DOM 遍历，如果元素没找到则返回null---------//      
    //---查找相关元素的前一个兄弟元素---//      
   function prev(elem){      
        do{      
           elemelem=elem.previousSibling;      
        }while(elem && elem.nodeType!=1);      
        return elem;      
    }      
    //---查找相关元素的下一个兄弟元素---//      
    function next(elem){      
       do{      
           elemelem=elem.nextSibling;      
        }while(elem && elem.nodeType!=1);      
        return elem;      
    }      
    //---查找第一个子元素的函数---//      
    function first(elem){      
        elemelem=elem.firstChild;      
        return elem && elem.nodeType!=1 ?next(elem):elem;      
    }      
    //---查找最后一个子元素的函数---//      
    function last(elem){      
        elemelem=elem.lastChild;      
        return elem && elem.nodeType!=1 ?prev(elem):elem;      
    }      
    //---查找父级元素的函数---//      
    //num是父级元素的级次，parent(elem,2)等价于  
   function parent(elem,num){      
        numnum=num||1;      
        for(var i=0; i<num; i++){      
            if(elem!=null){      
                elemelem=elem.parentNode;      
           }      
        }      
       return elem;      
   }   
</script> 

原文链接：http://cssrainbow.cn/tutorials/javascript/565.html