在javascript中找到兩個DOM節點的第一個共同父節點的最佳方式是什麼？

Question

我的問題就是這樣，但在上下文中我想檢查選擇對象，比較anchorNode和focusNode，如果它們不同，那麼找到第一個共同父元素。

var selected = window.getSelection(); 
var anchor = selection.anchorNode; 
var focus = selection.focusNode; 

if (anchor != focus) { 
    // find common parent... 
} 

Answer 1

我會嘗試這樣的事情，假設沒有JS庫

function getAncestors(node) { 
    if(node != document) return [node].concat(getAncestors(node.parentNode)); 
    else return [node]; 
} 

if(Array.prototype.indexOf === undefined) { 
    Array.prototype.indexOf = function(element) { 
     for(var i=0, l=this.length; i<l; i++) { 
      if(this[i] == element) return i; 
     } 
     return -1; 
    }; 
} 

然後就可以調用findFirstCommonAncestor(myElementA, myElementB)。

Answer 2

這種方式相當簡單：

var fp = $(focus).parents(); 
var ap = $(anchor).parents(); 
for (var i=0; i<ap.length; i++) { 
    if (fp.index(ap[i]) != -1) { 
    // common parent 
    } 
} 

遍歷一個元素的parents()和使用，直到找到一個匹配（或不）查看它們是否包含在其他的parents() 。使用該實用程序

function findFirstCommonAncestor(nodeA, nodeB, ancestorsB) { 
    var ancestorsB = ancestorsB || getAncestors(nodeB); 
    if(ancestorsB.length == 0) return null; 
    else if(ancestorsB.indexOf(nodeA) > -1) return nodeA; 
    else if(nodeA == document) return null; 
    else return findFirstCommonAncestor(nodeA.parentNode, nodeB, ancestorsB); 
} 

：

Answer 3

//現在看來似乎應該是相當簡單的，即使沒有圖書館或的indexOf

document.commonParent= function(a, b){ 
var pa= [], L; 
while(a){ 
    pa[pa.length]=a; 
    a= a.parentNode; 
} 
L=pa.length; 
while(b){ 
    for(var i=0; i<L; i++){ 
    if(pa[i]==b) return b; 
    } 
    b= b.parentNode; 
} 
}