DOM में HTMLCollections, NodeLists, और object arrays को अलग करना

DOM नोड्स तक पहुंचने पर, डेवलपर्स को अक्सर HTMLCollections, NodeLists, और object arrays का सामना करना पड़ता है। दस्तावेज़ संरचना में प्रभावी ढंग से हेरफेर करने के लिए इन डेटा संरचनाओं के बीच अंतर को समझना महत्वपूर्ण है।

HTMLCollections vs. विशिष्ट विशेषताएँ:

HTMLCollections में केवल तत्व नोड होते हैं, जबकि NodeLists किसी भी प्रकार के नोड को पकड़ सकते हैं।
• तरीके:
में सभी संग्रहों के लिए सामान्य तरीकों के अलावा, HTMLCollections नाम से तत्वों तक पहुँचने के लिए नामांकितआइटम विधि प्रदान करता है।
लाइव बनाम स्नैपशॉट संग्रह

DOM संग्रह या तो हो सकते हैं लाइव या स्नैपशॉट:

DOM में परिवर्तन किए जाने पर संग्रह स्वचालित रूप से अपडेट हो जाते हैं।
• स्नैपशॉट:
संग्रह स्थिर रहते हैं, DOM संशोधनों की परवाह किए बिना।
• ब्राउज़र विधियों (उदाहरण के लिए, getElementsByTagName) द्वारा लौटाए गए DOM संग्रह आम तौर पर लाइव होते हैं, जबकि jQuery चयन स्नैपशॉट होते हैं।

सरणी बनाम ऑब्जेक्ट सारणी

जबकि jQuery ऑब्जेक्ट कंसोल लॉग में सरणी के रूप में दिखाई देते हैं, वे वास्तव में ऑब्जेक्ट सरणी हैं:

संख्यात्मक सूचकांकों का उपयोग करके अनुक्रमिक संग्रह तक पहुंच प्राप्त की जाती है।
• ऑब्जेक्ट सारणी:
सारणी जहां संख्यात्मक और नामित गुणों दोनों का उपयोग करके तत्वों तक पहुंचा जाता है।
नोड्स का चयन

दस्तावेज़ विधियों का उपयोग करना:

document.getElementsByTagName("td"): सभी td तत्वों का HTMLCollection लौटाता है।

document.getElementsByClassName("myRow"): रिटर्न "myRow" वर्ग के साथ सभी तत्वों की एक नोडल सूची। और एक jQuery ऑब्जेक्ट, एक ऑब्जेक्ट ऐरे लौटाता है। &&&]console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: सरणियों की तुलना करता है।
• console.log('{ 123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: ऑब्जेक्ट सिंटैक्स के साथ ऑब्जेक्ट सरणियों की तुलना करता है।
• console.log('Node=',Node): वैश्विक नोड ऑब्जेक्ट को लॉग करता है, जो नोड प्रकारों का प्रतिनिधित्व करने वाला एक ऑब्जेक्ट ऐरे है।

console.log('document.links=', document.links): लिंक का एक HTMLCollection लॉग करता है। संग्रह।console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): "myRow" वर्ग के साथ तत्वों की एक नोडल सूची लॉग करता है।

console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): सभी td तत्वों का HTMLCollection लॉग करता है।
• console.log('$(" #myTable")=',$("#myTable")): #myTable तत्व का प्रतिनिधित्व करने वाले एक jQuery ऑब्जेक्ट को लॉग करता है।

console.log('$("td")=',$("td ")): सभी td तत्वों से युक्त एक jQuery ऑब्जेक्ट सरणी लॉग करता है।