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

另一种选择（基于this）

for(var e = document.getElementById("target"),p = [];e && e !== document;e = e.parentNode)
p.push(e);

Answer 5

如果您经常使用此功能，我相信在大多数情况下，这可能是长期性能最强的。为什么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。

Answer 6

我喜欢这种方法：

[...(function*(e){do { yield e; } while (e = e.parentNode);})($0)]

...其中$ 0是您的元素。

该方法的一个优点是它可以用作表达式中的值。

Answer 7

获取javascript数组中子节点的所有父节点

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

know more

如何在纯JavaScript中获取给定元素的所有父节点？

7 个答案: