PricingLoginStart free
JavaScript Academy · पाठ

NodeList बनाम HTMLCollection

तत्व-संग्रहों के बीच अंतर समझिए।

पाठ 4, कुल 4 में से13 चरण

NodeList बनाम HTMLCollection, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

दो प्रकार की कलेक्शन

DOM विधियाँ दो सूची-जैसी ऑब्जेक्ट में से एक लौटाती हैं: NodeList या HTMLCollection। ये देखने में समान हैं, लेकिन इनमें महत्वपूर्ण अंतर होते हैं।

NodeList कहाँ से आती है

querySelectorAll और childNodes NodeList ऑब्जेक्ट लौटाते हैं। querySelectorAll से मिलने वाली सूची स्थिर होती है: यह क्वेरी के समय लिया गया स्नैपशॉट होता है।

const items = document.querySelectorAll(".item"); // static NodeList

HTMLCollection कहाँ से आती है

getElementsByClassName, getElementsByTagName और children प्रॉपर्टी सक्रिय HTMLCollection ऑब्जेक्ट लौटाती हैं।

const items = document.getElementsByClassName("item"); // live HTMLCollection

स्थिर बनाम सक्रिय

DOM में बदलाव होने पर भी स्थिर NodeList अपनी मूल सामग्री बनाए रखती है। सक्रिय एचटीएमएल कलेक्शन अपने-आप जोड़े और हटाए गए तत्वों को दर्शाती है।

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

forEach का समर्थन

NodeList में अंतर्निहित forEach होता है। HTMLCollection में ऐसा नहीं होता, इसलिए आपको इसे बदलना होगा या इंडेक्स लूप का उपयोग करना होगा।

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

इनमें से कोई भी वास्तविक सारणी नहीं

दोनों सारणी जैसी होती हैं: इनमें length और इंडेक्स से पहुँच उपलब्ध होती है, लेकिन map, filter और reduce नहीं होते।

const list = document.querySelectorAll(".item");
// list.map is undefined

Array.from से बदलना

Array.from किसी भी कलेक्शन को वास्तविक सारणी में बदल देता है और सभी सारणी विधियों का उपयोग संभव बनाता है।

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

स्प्रेड से बदलना

स्प्रेड ऑपरेटर एक संक्षिप्त विकल्प है, जो वास्तविक सारणी भी बनाता है।

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

सक्रिय-सूची लूप का जाल

सक्रिय एचटीएमएल कलेक्शन पर पुनरावृत्ति करते समय तत्व हटाने से इंडेक्स खिसक जाते हैं और कुछ आइटम छूट जाते हैं। सुरक्षित रूप से पुनरावृत्ति करने के लिए पहले इसे सारणी में बदलें।

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

दोनों में इंडेक्स से पहुँचना

दोनों संख्यात्मक इंडेक्स और length का समर्थन करते हैं, इसलिए मूल पहुँच एक जैसी दिखती है, भले ही उनका आंतरिक व्यवहार अलग हो।

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

सही विकल्प चुनना

जब आपको स्थिर स्नैपशॉट और अंतर्निहित forEach चाहिए, तब querySelectorAll का उपयोग करें। सक्रिय कलेक्शन का उपयोग तब करें जब आपको विशेष रूप से सूची को DOM के साथ समन्वयित रखना हो।

त्वरित जाँच

अंतर पहचानें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

NodeList (querySelectorAll से) स्थिर होती है और इसमें forEach होता है; एचटीएमएल कलेक्शन (getElementsByClassName, getElementsByTagName, children से) सक्रिय होती है और इसमें forEach नहीं होता। इनमें से कोई भी वास्तविक सारणी नहीं है; map/filter/संकलन का उपयोग करने से पहले तथा बदलाव करते समय सुरक्षित रूप से पुनरावृत्ति करने के लिए Array.from या स्प्रेड का उपयोग करके इन्हें बदलें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

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

पाठ्यक्रम
59
पाठ
200
निःशुल्क सीखना शुरू करेंपूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “NodeList बनाम HTMLCollection” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “NodeList बनाम HTMLCollection” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“NodeList बनाम HTMLCollection” में मैं क्या सीखूँगा?

तत्व-संग्रहों के बीच अंतर समझिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“NodeList बनाम HTMLCollection” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. querySelector से तत्व चुनना
  2. getElementById और getElementsByClassName
  3. पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना
  4. NodeList बनाम HTMLCollection
← JavaScript Academy पर वापस जाएँ