Javascript 如何在纯javascript中获取给定元素的所有父节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8729193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get all parent nodes of given element in pure javascript?
提问by rsk82
I mean an array of them. That is a chain from top HTML to destination element including the element itself.
我的意思是其中的一个数组。这是从顶部 HTML 到目标元素（包括元素本身）的链。
for example for element <A>it would be:
例如对于元素<A>，它将是：
[HTML, BODY, DIV, DIV, P, SPAN, A]
回答by Wayne
A little shorter (and safer, since targetmay not be found):
短一点（更安全，因为target可能找不到）：
var a = document.getElementById("target");
var els = [];
while (a) {
els.unshift(a);
a = a.parentNode;
}
回答by techfoobar
You can try something like:
您可以尝试以下操作：
var nodes = [];
var element = document.getElementById('yourelement');
nodes.push(element);
while(element.parentNode) {
nodes.unshift(element.parentNode);
element = element.parentNode;
}
回答by Nathan MacInnes
Something like this:
像这样的东西：
var nodeList = [document.getElementById('element')];
while (nodeList[nodeList.length - 1].parentNode !== document) {
nodeList.unshift(nodeList[nodeList.length - 1].parentNode);
}
回答by Alex Szücs
回答by Hyman Giffin
I believe this will likely be the most performant in the long runin the most scenarios if you are making frequent usage of this function. The reason for why t will be more performant is because it initially checks to see what kind of depths of ancestry it might encounter. Also, instead of creating a new array every time you call it, this function will instead efficiently reuse the same array, and slice it which is very optimized in some browsers. However, since there is no really efficient way I know of to check the maximum depth, I am left with a less efficient query-selector check.
我相信，如果您经常使用此功能，那么在大多数情况下，从长远来看，这可能是性能最高的。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)
}
The browser compatibility for the above function is that it will work in Edge, but not in IE. If you want IE support, then you will need a Array.prototype.copyWithinpolyfill.
上述功能的浏览器兼容性是它可以在Edge中运行，但不能在IE中运行。如果你想要 IE 支持，那么你需要一个Array.prototype.copyWithinpolyfill。
