DOM
traversal
खोज…
पेड़ की टहनी
TreeWalker एक जनरेटर जैसा इंटरफ़ेस है जो डोम ट्री में आसान और कुशल तरीके से पुनः फ़िल्टरिंग नोड बनाता है।
निम्न कोड पृष्ठ के सभी Text नोड्स के मूल्य को समेटता है, और परिणाम प्रिंट करता है।
let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);
let text = "";
while (treeWalker.nextNode())
text += treeWalker.currentNode.nodeValue;
console.log(text); // all text in the page, concatenated
.createTreeWalker फ़ंक्शन का एक हस्ताक्षर है
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| पैरामीटर | विवरण |
|---|---|
| जड़ | 'रूट' नोड जो सबट्रेरी है, उसे ट्रेस किया जाना है |
| whatToShow | दिखाने के लिए किस प्रकार के नोड्स के लिए वैकल्पिक, अहस्ताक्षरित लंबी। अधिक जानकारी के लिए NodeFilter देखें। |
| फिल्टर | वैकल्पिक, एक ऑब्जेक्ट जो कि नोड को निर्धारित करने के लिए स्वीकार करता है कि क्या नोड जांच से गुजरने के बाद एक नोड के साथ एक वस्तु पर विचार किया जाना चाहिए |
| entityReferenceExpansion | अप्रचलित और वैकल्पिक, एक बूलियन ध्वज है जो इंगित करता है कि जब EntityReference को त्यागते हैं तो एक ही समय में उसके पूरे उप-पेड़ को त्याग दिया जाना चाहिए। |
नोड्स पर फेरबदल
NodeIterator इंटरफ़ेस एक डोम ट्री में नोड्स पर पुनरावृत्ति के लिए तरीके प्रदान करता है।
इस तरह एक दस्तावेज दिया:
<html>
<body>
<section class="main">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</section>
</body>
</html>
एक <li> तत्वों को प्राप्त करने के लिए एक पुनरावृत्ति की कल्पना कर सकता है:
let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
console.log(node);
}
उदाहरण के रूप में मोजिला कंट्रीब्यूटर्स द्वारा उपलब्ध कराए गए उदाहरण से अनुकूलित किया गया है। C.ce -SA 2.5 के तहत लाइसेंस प्राप्त मोज़िला डेवलपर नेटवर्क पर document.createNodeIterator() प्रलेखन से।
यह कुछ इस तरह लॉग करेगा:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
ध्यान दें कि यह ट्रीवल्कर iterface के समान है, लेकिन केवल nextNode() और previousNode() nextNode() previousNode() कार्यक्षमता प्रदान करता है।