1、遍历的接口分为 祖先 同胞兄弟 后代 过滤

基础知识： nodeType 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9

nodeName 元素节点的nodeName是标签名称 属性节点的nodeName是属性名称 文本节点的nodeName永远是 #text 文档节点的nodeName永远是 #document

2、同胞遍历的例子：

    
    
    
    
    
    
    
    
    
    
    
    
    jQuery遍历同胞
    模拟遍历同胞
    
    
    
       
     
I
       
     
II
          
      
             
       
A
             
       
B
                
        
                   
         
1
                   
         
2
                   
         
3
                 
        
              
             
       
C
           
      
        
       
     
III
     
    
    
    

js代码

function dir(elem, dir, until) { var matched = [], truncate = until !== undefined; while ((elem = elem[dir]) && elem.nodeType !== 9) { if (elem.nodeType === 1) { if (truncate) { if (elem.nodeName.toLowerCase() == until || elem.className == until) { break; } } matched.push(elem); } } return matched; }

function nextAll(elem) { return dir(elem, "nextSibling"); }

function prevAll(elem) { return dir(elem, "previousSibling"); }

function nextUntil(elem, until) { return dir(elem, "nextSibling", until); }

function prevUntil(elem, until) { return dir(elem, "previousSibling", until); }

$("#test1").click(function(){ var item = $('li.item-ii'); alert(item.nextAll()[0].className) alert(item.prevAll()[0].className) alert(item.nextUntil('.end')[0].className) alert(item.prevUntil('.first')[0].className) })

$("#test2").click(function(){ var item = document.querySelectorAll('li.item-ii')[0] alert(nextAll(item)[0].className) alert(prevAll(item)[0].className) alert(nextUntil(item, '.end')[0].className) alert(prevUntil(item, '.first')[0].className) })