Как получить все родительские узлы данного элемента в чистом javascript?

Ответ 1

Немного короче (и безопаснее, так как target может быть не найден):

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

Ответ 2

Вы можете попробовать что-то вроде:

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

Ответ 3

Что-то вроде этого:

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

Ответ 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.