如何獲得純JavaScript中給定元素的所有父節點？

Question

我的意思是他們的數組。這是從頂級HTML到包含元素本身的目標元素的鏈。

例如用於元素<A>這將是：

[HTML, BODY, DIV, DIV, P, SPAN, A] 

Answer 1

短一些（和更安全，因爲target可能無法找到）：

var a = document.getElementById("target"); 
var els = []; 
while (a) { 
    els.unshift(a); 
    a = a.parentNode; 
} 

Answer 2

你可以嘗試這樣的：

var nodes = []; 
var element = document.getElementById('yourelement'); 
nodes.push(element); 
while(element.parentNode) { 
    nodes.unshift(element.parentNode); 
    element = element.parentNode; 
} 

Answer 3

類似這樣的：

var nodeList = [document.getElementById('element')]; 
while (nodeList[nodeList.length - 1].parentNode !== document) { 
    nodeList.unshift(nodeList[nodeList.length - 1].parentNode); 
} 

Answer 4

我相信這將有可能從長遠來看最高效的在大多數情況下，如果你正在此功能的頻繁使用。 t爲什麼會更高性能的原因是因爲它最初會檢查它可能遇到的血統的深度。另外，不是每次調用它時都創建一個新的數組，而是該函數將高效地重用相同的數組，並對其進行分片，並在一些瀏覽器中對其進行優化。但是，由於我沒有真正有效的方法來檢查最大深度，所以我剩下的查詢選擇器檢查效率較低。

// !IMPORTANT! When moving this coding snippet over to your production code, 
// do not run the following depthtest more than once, it is not very performant 
var kCurSelector="*|*", curDepth=3; 
while (document.body.querySelector(kCurSelector += '>*|*')) curDepth++; 
curDepth = Math.pow(2, Math.ceil(Math.log2(startDepth))), 
var parentsTMP = new Array(curDepth); 

function getAllParentNodes(Ele){ 
    var curPos = curDepth; 

    if (Ele instanceof Node) 
     while (Ele !== document){ 
     if (curPos === 0){ 
      curPos += curDepth; 
      parentsTMP.length <<= 1; 
      parentsTMP.copyWithin(curDepth, 0, curDepth); 
      curDepth <<= 1; 
     } 
     parentsTMP[--curPos] = Ele; 
     Ele = Ele.parentNode; 
     } 
    return retArray.slice(curPos) 
} 

上述功能的瀏覽器兼容性是它可以在Edge中工作，但不能在IE中工作。如果你想要IE支持，那麼你將需要一個Array.prototype.copyWithin polyfill。