Как получить все родительские узлы данного элемента в чистом 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

Другая альтернатива (на основе 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.