जावास्क्रिप्ट के साथ डोम ट्री को फ़िल्टर और ट्रैवर्स कैसे करें

क्या आप जानते हैं कि एक जावास्क्रिप्ट एपीआई है जिसका एकमात्र मिशन है फ़िल्टर करें और नोड्स के माध्यम से पुनरावृति करें हम एक डोम पेड़ से चाहते हैं? वास्तव में, एक नहीं बल्कि दो ऐसे एपीआई हैं: NodeIterator तथा TreeWalker. वे कुछ उपयोगी मतभेदों के साथ एक दूसरे के समान हैं। दोनों कर सकते हैं नोड्स की सूची लौटाएं जिसका अनुपालन करते हुए किसी दिए गए रूट नोड के नीचे मौजूद हैं किसी भी पूर्वनिर्धारित और / या कस्टम फ़िल्टर नियम उन पर लागू किया गया.

एपीआई में उपलब्ध पूर्वनिर्धारित फिल्टर हमारी मदद कर सकते हैं विभिन्न प्रकार के नोड्स को लक्षित करें जैसे पाठ नोड्स या तत्व नोड्स, और कस्टम फ़िल्टर (हमारे द्वारा जोड़ा गया) कर सकते हैं आगे बंच को छान लें, उदाहरण के लिए विशिष्ट सामग्री के साथ नोड्स की तलाश में। नोड्स की लौटी हुई सूची है iterable, यानी वे हो सकते हैं के माध्यम से पाला, और हम सूची में सभी व्यक्तिगत नोड्स के साथ काम कर सकते हैं.

कैसे उपयोग करें NodeIterator एपीआई

ए NodeIterator ऑब्जेक्ट का उपयोग करके बनाया जा सकता है createNodeIterator () की विधि दस्तावेज़ इंटरफेस। यह विधि तीन तर्क देता है. पहले एक की आवश्यकता है; यह”एस रूट नोड वह सभी नोड्स रखता है जिन्हें हम फ़िल्टर करना चाहते हैं.

दूसरी और तीसरी दलीलें हैं ऐच्छिक. वे सभी पूर्वनिर्धारित और कस्टम फ़िल्टर, क्रमशः। पूर्वनिर्धारित फ़िल्टर के रूप में उपयोग के लिए उपलब्ध हैं के स्थिरांक NodeFilter वस्तु.

उदाहरण के लिए, यदि NodeFilter.SHOW_TEXT निरंतर दूसरे पैरामीटर के रूप में जोड़ा जाता है यह एक के लिए एक पुनरावृत्ति लौटाएगा रूट नोड के तहत सभी पाठ नोड्स की सूची. NodeFilter.SHOW_ELEMENT वापस होगा केवल तत्व नोड्स. की पूरी सूची देखें सभी उपलब्ध स्थिरांक.

तीसरा तर्क (कस्टम फ़िल्टर) एक है फ़ंक्शन जो फ़िल्टर को लागू करता है.

यहाँ एक है उदाहरण कोड स्निपेट:

        
शीर्षक
 
 यह पृष्ठ आवरण है 
नमस्ते
 
क्या हाल है?
 
 टेक्स्ट कुछ लिंक    

हम मान लेना चाहते हैं उन सभी टेक्स्ट नोड्स की सामग्री निकालें, जो अंदर हैं #wrapper div, इस तरह से हम इसका उपयोग करते हैं NodeIterator:

 var div = document.querySelector ('# रैपर'); var नोडइंटरेटर = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); जबकि (nodeIterator.nextNode ()) कंसोल.लॉग (nodeIterator.referenceNode.nodeValue.trim ());  / * कंसोल आउटपुट [लॉग] यह पेज रैपर है [लॉग] हैलो [लॉग] [लॉग] आप कैसे हैं? [लॉग] * / 

nextNode () की विधि NodeIterator एपीआई अगले नोड को पुनरावृत्त पाठ नोड्स की सूची में लौटाता है. जब हम इसका उपयोग ए जबकि सूची में प्रत्येक नोड तक पहुँचने के लिए लूप, हम कंसोल में हर टेक्स्ट नोड की छंटनी की गई सामग्री को लॉग करते हैं। referenceNode की संपत्ति NodeIterator वर्तमान में इट्रेटर नोड से जुड़ा हुआ है.

जैसा कि आप आउटपुट में देख सकते हैं, उनकी सामग्री के लिए बस खाली जगहों के साथ कुछ टेक्स्ट नोड हैं। हम कर सकते हैं कस्टम फ़िल्टर का उपयोग करके इन खाली सामग्रियों को दिखाने से बचें:

 var div = document.querySelector ('# रैपर'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, फ़ंक्शन (नोड) return (नोड.नोडलव्यू.ट्रिम ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); जबकि (nodeIterator.nextNode ()) कंसोल.लॉग (nodeIterator.referenceNode.nodeValue.trim ());  / * कंसोल आउटपुट [लॉग] यह पेज रैपर है [लॉग] हैलो [लॉग] आप कैसे हैं? * / 

कस्टम फ़िल्टर फ़ंक्शन निरंतर लौटता है NodeFilter.FILTER_ACCEPTयदि पाठ नोड खाली नहीं है, जो नोड्स की सूची में उस नोड को शामिल करने की ओर जाता है, जो पुनरावृत्ति से अधिक हो जाएगा। इसके विपरीत, NodeFilter.FILTER_REJECT निरंतर को क्रम में लौटाया जाता है खाली पाठ नोड्स को बाहर करें नोड्स की पुनरावृत्त सूची से.

कैसे उपयोग करें TreeWalker एपीआई

जैसा कि मैंने पहले उल्लेख किया है, NodeIterator तथा TreeWalker एपीआई हैं एक दूसरे के समान.

TreeWalker का उपयोग कर बनाया जा सकता है createTreeWalker () की विधि दस्तावेज़ इंटरफेस। यह विधि, जैसे createNodeFilter (), तीन तर्क देता है: रूट नोड, एक पूर्वनिर्धारित फ़िल्टर और एक कस्टम फ़िल्टर.

हम अगर उपयोग TreeWalker के बजाय एपीआई NodeIterator पिछला कोड स्निपेट निम्न जैसा दिखता है:

 var div = document.querySelector ('# रैपर'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, फंक्शन (नोड) return (node.nodeValue.trim ()! == ""); NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); जबकि (treeWalker.nextNode ()) कंसोल.लॉग (treeWalker.currentNode.nodeValue.trim ());  / * आउटपुट [लॉग] यह पेज रैपर है [लॉग] हैलो [लॉग] आप कैसे हैं? * / 

के बजाय referenceNode, currentNode की संपत्ति TreeWalker API का उपयोग किया जाता है उस नोड तक पहुंचें, जिससे वर्तमान में पुनरावृत्ति संलग्न है. इसके अलावा nextNode () तरीका, Treewalker अन्य उपयोगी विधियाँ हैं। previousNode () विधि (में भी मौजूद है NodeIterator) पिछला नोड लौटाता है नोड का पुनरावृत्ती वर्तमान में लंगर डाला गया है.

इसी तरह की कार्यक्षमता के द्वारा किया जाता है parentNode (), पहला बच्चा(), अंतिम बच्चा(), previousSibling (), तथा nextSibling () तरीकों। ये तरीके हैं में ही उपलब्ध है TreeWalker एपीआई.

यहाँ एक कोड उदाहरण है कि नोड के अंतिम बच्चे को आउटपुट करता है एटरेटर को एंकर किया गया है:

 var div = document.querySelector ('# रैपर'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * आउटपुट [लॉग] 
क्या हाल है?
 * / 

कौन सा API चुनना है

चुनना NodeIterator एपीआई, जब आप बस एक साधारण पुनरावृत्ति की जरूरत है चयनित नोड्स के माध्यम से फ़िल्टर और लूप करने के लिए। और, उठाओ TreeWalker एपीआई, जब आप फ़िल्टर किए गए नोड्स के परिवार तक पहुंचने की आवश्यकता है, जैसे कि उनके तात्कालिक भाई-बहन.