DOM中元素之間的距離（生成深度等）

Question

我正在尋找一個函數，它會根據祖先，兄弟姐妹和後代返回DOM中元素之間的「距離」。 例如，假設我有：

<div id="div1"> 
    <div id="div5"></div> 
</div> 
<div id="div2"> 
    <div id="div6"> 
     <div id="div9"></div> 
    </div> 
    <div id="div7"></div> 
</div> 
<div id="div3"></div> 
<div id="div4"> 
    <div id="div8"> 
     <div id="div10"></div> 
    </div> 
</div> 

那麼我想這將返回，就像這樣#div5和#div10之間的距離的函數：

{ 
    up: 1, 
    across: 3, 
    down: 2 
} 

由於擺脫#div5到#div10你必須上升一代，前進3個兄弟姐妹（到#div4），然後下降2代。 同樣，#div9到#div1將返回：

{ 
    up: 2, 
    across: -1, 
    down: 0 
} 

換去了兩代，然後回一個兄弟。我已經有了一個這樣做的功能（我將在下面包含這個答案），所以我將它包括在這裏，因爲a）我認爲其他人可能會覺得它有用;和b）也許別人有更好的方式來做到這一點。

Answer 1

好的，這是我的。在問題描述的DOM會使用類似

function DOMdistance(elem1,elem2) { 

    if (elem1 === elem2) { 
     return { 
      up: 0, 
      across: 0, 
      down: 0 
     }; 
    } 

    var parents1 = [elem1], 
     parents2 = [elem2], 
     gens = 1, 
     sibs = 0, 
     sibElem; 

    // searches up the DOM from elem1 to the body, stopping and 
    // returning if it finds elem2 as a direct ancestor 
    while (elem1 !== document.body) { 
     elem1 = elem1.parentNode; 
     if (elem1 === elem2) { 
      return { 
       up: parents1.length, 
       across: 0, 
       down: 0 
      }; 
     } 
     parents1.unshift(elem1); 
    } 

    // reset value of elem1 for use in the while loop that follows: 
    elem1 = parents1[parents1.length - 1]; 

    // searches up the DOM from elem2 to the body, stopping and 
    // returning if it finds elem1 as a direct ancestor 
    while (elem2 !== document.body) { 
     elem2 = elem2.parentNode; 
     if (elem2 === elem1) { 
      return { 
       up: 0, 
       across: 0, 
       down: parents2.length 
      }; 
     } 
     parents2.unshift(elem2); 
    } 

    // finds generation depth from body of first generation of ancestors 
    // of elem1 and elem2 that aren't common to both 
    while (parents1[gens] === parents2[gens]) { 
     gens++; 
    } 

    sibElem = parents1[gens]; 

    // searches forward across siblings from the earliest non-common ancestor 
    // of elem1, looking for earliest non-common ancestor of elem2 
    while (sibElem) { 
     sibElem = sibElem.nextSibling; 
     if (sibElem && sibElem.tagName) { 
      sibs++; 
      if (sibElem === parents2[gens]) { 
       return { 
        up: parents1.length - gens - 1, 
        across: sibs, 
        down: parents2.length - gens - 1 
       }; 
      } 
     } 
    } 

    sibs = 0; 
    sibElem = parents1[gens]; 

    // searches backward across siblings from the earliest non-common ancestor 
    // of elem1, looking for earliest non-common ancestor of elem2 
    while (sibElem) { 
     sibElem = sibElem.previousSibling; 
     if (sibElem && sibElem.tagName) { 
      sibs--; 
      if (sibElem === parents2[gens]) { 
       return { 
        up: parents1.length - gens - 1, 
        across: sibs, 
        down: parents2.length - gens - 1 
       }; 
      } 
     } 
    } 

} 

因此，例如，正從#div5的「距離」，以#div10：

var divOne = document.getElementById('div5'), 
    divTwo = document.getElementById('div10'), 
    distance = DOMdistance(divOne, divTwo); 

我希望解釋的不夠好代碼中的註釋

，因此distance是：

{ 
    up: 1, 
    across: 3, 
    down: 2 
} 

演示：http://jsfiddle.net/x58Ga/