← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 22 of 26

JS DOM कलेक्शन्स

कई DOM methods एक साथ कई elements का collection return करते हैं -- पर सभी collections एक जैसा व्यवहार नहीं करते। NodeList (querySelectorAll से) और HTMLCollection (getElementsByClassName/TagName से) दिखने में एक जैसे लगते हैं पर इसमें अलग होते हैं कि वे अपने आप update होते हैं या नहीं और कौन से array methods सीधे support करते हैं।

In this page:

  1. querySelectorAll से NodeList
  2. getElementsByClassName/TagName से HTMLCollection
  3. Collections को असली Arrays में Convert करना
  4. सही Selection Method चुनना
  5. आम Collection Pitfalls
Syntax
javascript 
document.getElementsByTagName("tag");
document.getElementsByClassName("class");
document.querySelectorAll("selector");
document.forms;

querySelectorAll से NodeList

document.querySelectorAll() एक NodeList return करता है -- query चलने के समय matching elements का एक static snapshot, जो बाद में DOM बदलने पर अपने आप update नहीं होता, और जो iteration के लिए सीधे forEach() method support करता है।

Note: कई elements select करने के अपने default तरीके के रूप में querySelectorAll() इस्तेमाल करें, क्योंकि उसकी resulting NodeList का forEach() support iteration को सीधा बना देता है।
Warning: NodeList का static होना यह मतलब रखता है कि query चलने के बाद page में जोड़े गए नए elements इसमें नहीं दिखेंगे -- अगर आपको up-to-date collection चाहिए तो query को फिर से चलाएं।

उदाहरण: NodeList from querySelectorAll

javascript 
<p class="item">A</p><p class="item">B</p>
<script>
  const list = document.querySelectorAll(".item"); // static NodeList
  list.forEach(el => console.log(el.textContent));
</script>

getElementsByClassName/TagName से HTMLCollection

document.getElementsByClassName() और getElementsByTagName() एक HTMLCollection return करते हैं -- एक "live" collection जो DOM बदलावों को होते ही अपने आप दिखाने लगता है, पर जो सीधे forEach() support नहीं करता, ज़्यादातर iteration ज़रूरतों के लिए पहले array में convert करना पड़ता है।

Note: किसी HTMLCollection पर forEach, map, या filter जैसे array methods इस्तेमाल करने से पहले Array.from() से उसे एक असली array में convert करें।
Warning: एक साथ matching elements जोड़ते या हटाते हुए किसी live HTMLCollection पर एक साधारण for loop से loop करना confusing results दे सकता है, क्योंकि collection की length loop के बीच में बदल जाती है।

उदाहरण: HTMLCollection from getElementsByClassName/TagName

javascript 
<p class="item">A</p>
<script>
  const collection = document.getElementsByClassName("item"); // live HTMLCollection
  console.log(collection.length);
</script>

Collections को असली Arrays में Convert करना

Array.from(collection) (या spread syntax [...collection]) किसी NodeList या HTMLCollection को एक असली JavaScript array में बदल देता है, जो पूरे array method set को unlock कर देता है -- map, filter, reduce, वगैरह -- जिसे न तो कोई DOM collection type खुद पूरी तरह support करता है।

Note: जैसे ही आपको basic iteration से आगे कुछ चाहिए, जैसे collection को transform या filter करना, Array.from() से एक असली array में convert करें।
Warning: किसी live HTMLCollection को array में convert करना उस पल का एक तय snapshot capture करता है -- resulting array उस तरह update होते रहना जारी नहीं रखेगा जैसे original live collection रखता।

उदाहरण: Converting Collections to Real Arrays

javascript 
<p class="item">A</p><p class="item">B</p>
<script>
  // Declare the constant `collection`, set to `document.getElementsByClassName("item")`
  const collection = document.getElementsByClassName("item");
  // Declare the constant `arr`, set to `Array.from(collection)`
  const arr = Array.from(collection);
  // Print `arr.map(el => el.textContent)` to the console
  console.log(arr.map(el => el.textContent));
</script>

सही Selection Method चुनना

अपने flexible CSS-selector syntax और forEach-ready NodeList के साथ querySelectorAll() ज़्यादा modern, आमतौर पर preferred default है; getElementsByClassName/TagName खासतौर पर तब उपयोगी रहते हैं जब आपको एक live, auto-updating collection चाहिए जो DOM बदलावों को अपने आप track करे।

Note: ज़्यादातर element selection ज़रूरतों के लिए querySelectorAll() को default बनाएं; getElementsBy* का इस्तेमाल तभी करें जब आपको जानबूझकर एक live collection चाहिए।
Warning: असल में एक fixed snapshot चाहते हुए भी live HTMLCollection चुनना (या इसका उल्टा) subtle bugs ला सकता है जो सिर्फ तब दिखते हैं जब initial selection के बाद DOM बदलता है।

उदाहरण: Choosing the Right Selection Method

javascript 
<p class="item">A</p>
<script>
  console.log(document.querySelectorAll(".item")); // modern default
  console.log(document.getElementsByClassName("item")); // live collection
</script>

आम Collection Pitfalls

दो आम गलतियां: यह भूल जाना कि collection खाली भी हो सकता है (किसी element के मौजूद होने का मान लेने से पहले .length जांचना), और किसी live HTMLCollection को एक साधारण for loop से iterate करते हुए DOM को बदलना, जिससे collection की length के loop के बीच में बदलने पर elements skip हो सकते हैं या दो बार visit हो सकते हैं।

Note: किसी live collection को iterate करते हुए उससे elements हटाते समय, shifting-length problem से बचने के लिए पीछे की ओर (अंत से शुरुआत की ओर) loop करें या पहले एक static array में convert करें।
Warning: किसी live HTMLCollection को एक standard for loop से आगे की ओर iterate करते हुए उससे elements हटाना एक classic bug है -- elements हटने पर indices शिफ्ट हो जाते हैं, जिससे कुछ skip हो जाते हैं।

उदाहरण: Common Collection Pitfalls

javascript 
<p class="item">A</p>
<script>
  const items = document.querySelectorAll(".missing");
  if (items.length === 0) console.log("No matching elements found"); // check length first
</script>
Live Example
Related Topics

JS DOM नेविगेशन · JS DOM मेथड्स · JS का DOM · JS एसिंक कॉलबैक्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह मान लेना कि हर DOM collection .map() या .filter() जैसे array methods सीधे support करता है -- एक NodeList forEach support करता है, लेकिन एक HTMLCollection उसे भी बिना पहले convert किए support नहीं करता।
  2. यह न समझना कि एक HTMLCollection "live" है (automatically DOM changes reflect करता है), जबकि querySelectorAll से मिला एक NodeList "static" है (एक fixed snapshot) -- DOM modify करते हुए किसी live collection पर loop करना अनपेक्षित व्यवहार कर सकता है।
  3. array methods इस्तेमाल करने से पहले किसी collection को असली array में (Array.from() या spread operator से) convert करना भूल जाना, जिन्हें दोनों collection types natively support नहीं करते।
चैप्टर सारांश
  • querySelectorAll() एक static NodeList return करता है, जो forEach() support करता है लेकिन दूसरे array methods सीधे नहीं।
  • getElementsByClassName() और getElementsByTagName() एक live HTMLCollection return करते हैं, जो forEach() भी बिल्कुल support नहीं करता।
  • Array.from(collection) किसी भी DOM collection को एक असली array में convert करता है, array methods का पूरा set unlock करते हुए।
ब्राउज़र सपोर्ट

NodeList और HTMLCollection दोनों को सबसे शुरुआती DOM implementations से हर browser में support मिला है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Navigation Next Lesson → JS DOM Methods

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.