शुद्ध जावास्क्रिप्ट में दिए गए तत्व के सभी मूल नोड्स कैसे प्राप्त करें?

Question

मेरा मतलब है उनमें से एक सरणी। यह शीर्ष एचटीएमएल से गंतव्य तत्व तक तत्व है जिसमें तत्व भी शामिल है।

तत्व <A> के लिए उदाहरण के लिए यह होगा: (और सुरक्षित के बाद से target नहीं पाया जा सकता है)

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

Answer 1

एक छोटी सी छोटी:

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

Answer 2

आप की तरह कुछ कोशिश कर सकते हैं

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

Answer 3

कुछ ऐसा:

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

Answer 4

मेरा मानना ​​है कि इस संभावना सबसे परिदृश्यों में सबसे शक्तिशाली लंबे समय में हो सकता है अगर आप इस समारोह के लगातार उपयोग कर रहे हैं। क्यों टी अधिक प्रदर्शन करने वाला कारण है क्योंकि यह प्रारंभ में यह देखने के लिए जांच करता है कि वंश की किस तरह की गहराई का सामना करना पड़ सकता है। साथ ही, जब भी आप इसे कॉल करते हैं, तो एक नई सरणी बनाने के बजाय, यह फ़ंक्शन इसके बजाय उसी सरणी का कुशलता से पुन: उपयोग करेगा, और इसे स्लाइस करेगा जो कुछ ब्राउज़रों में बहुत अनुकूलित है। हालांकि, चूंकि अधिकतम गहराई की जांच करने के बारे में मुझे कोई वास्तव में कुशल तरीका नहीं है, इसलिए मुझे कम कुशल क्वेरी-चयनकर्ता चेक के साथ छोड़ दिया गया है।

// !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) 
} 

उपर्युक्त फ़ंक्शन के लिए ब्राउज़र संगतता यह है कि यह एज में काम करेगी, लेकिन IE में नहीं। यदि आप आईई समर्थन चाहते हैं, तो आपको Array.prototype.copyWithin पॉलीफिल की आवश्यकता होगी।