डोम ट्रीवॉकर एपीआई

डोम ट्रीवॉकर एपीआई

ट्रीवॉकर एपीआई डेवलपर्स को एक ट्रीवॉकर ऑब्जेक्ट बनाने की अनुमति देता है जिसका उपयोग डोम ट्री को पार करने के लिए किया जा सकता है। ट्रीवॉकर में कई विधियाँ हैं जिनका उपयोग डोम ट्री के भीतर ट्रीवॉकर की वर्तमान स्थिति को स्थानांतरित करने के साथ-साथ वर्तमान नोड के बारे में जानकारी वापस करने के लिए किया जा सकता है।

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

ट्रीवॉकर एपीआई के उदाहरण उपयोग

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

ऊपर दिया गया कोड एक ट्रीवॉकर बनाता है, जिसका उपयोग तब DOM ट्री को पार करने के लिए किया जाता है। ट्रीवॉकर केवल उन नोड्स को स्वीकार करता है जो डीआईवी तत्व हैं, और इसलिए यह किसी अन्य प्रकार के नोड को छोड़ देगा। जैसे ही यह पेड़ को पार करता है, यह प्रत्येक डीआईवी नोड का टैग नाम प्रिंट करता है जिसका सामना करना पड़ता है। यह किसी दस्तावेज़ में सभी DIV तत्वों को खोजने का एक उपयोगी तरीका है।

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

उपरोक्त कोड पिछले उदाहरण के समान है, लेकिन केवल DIV नोड्स को स्वीकार करता है जिनमें "my-class" वर्ग होता है। एक बार जब यह इस तरह के नोड का सामना करता है, तो यह इसमें 1px काली सीमा जोड़ता है। यह सिर्फ एक सरल उदाहरण है कि आप ट्रीवॉकर एपीआई के साथ क्या कर सकते हैं।

(लगभग) सभी हरे

ट्रीवॉकर एपीआई का उपयोग करते समय चुनौतियों में से एक यह है कि वर्तमान नोड का ट्रैक खोना आसान हो सकता है। ऐसा इसलिए है क्योंकि एपीआई किसी विशिष्ट नोड को खोजने के लिए कोई विधि प्रदान नहीं करता है। इसके बजाय, आपको पेड़ के चारों ओर घूमने के तरीकों का उपयोग करना होगा, जो मुश्किल हो सकता है। एक और चुनौती यह है कि एपीआई ब्राउज़र द्वारा बहुत अच्छी तरह से समर्थित नहीं है, इसलिए आपको पॉलीफिल का उपयोग करना पड़ सकता है।

सारांश

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

डीओएम डेटा पुनर्प्राप्ति से संबंधित अन्य दिलचस्प एपीआई निम्नलिखित हैं, जिन्हें मैं भविष्य में कवर कर सकता हूं।

• डोम रेंज एपीआई
• डोम नोडइटरेटर एपीआई