در DOM، هنگام انتخاب چندین عنصر، مرورگر آن‌ها را به صورت Collection برمی‌گرداند.
این مجموعه‌ها به دو نوع اصلی تقسیم می‌شوند: HTMLCollection و NodeList.

🔹 1. HTMLCollection

• مجموعه‌ای از عناصر HTML

• معمولا توسط روش‌های زیر برگردانده می‌شود:

  • getElementsByTagName()

  • getElementsByClassName()

  • forms, images, links

let divs = document.getElementsByTagName("div");
console.log(divs);       // HTMLCollection
console.log(divs[0]);    // دسترسی به اولین عنصر

• ویژگی‌ها:

  • زنده (Live) → تغییرات DOM را به صورت خودکار نشان می‌دهد

  • آرایه واقعی نیست → باید با index دسترسی پیدا کرد یا تبدیل به آرایه کرد

divs[0].style.backgroundColor = "blue";

🔹 2. NodeList

• مجموعه‌ای از Nodeها (Element, Text, Comment)

• معمولا توسط روش‌های زیر برگردانده می‌شود:

  • querySelectorAll()

  • childNodes

let items = document.querySelectorAll(".item");
console.log(items); // NodeList

• ویژگی‌ها:

  • NodeList برگشتی از querySelectorAll() غیر زنده (Static) است

  • NodeList برگشتی از childNodes زنده است

  • می‌توان از forEach روی NodeList استفاده کرد

items.forEach(item => item.style.color = "red");

🔹 3. تبدیل Collection به آرایه

• برای استفاده از متدهای آرایه می‌توان HTMLCollection یا NodeList را تبدیل کرد

let divsArray = Array.from(document.getElementsByTagName("div"));
divsArray.forEach(div => div.style.border = "1px solid black");

• یا با اسپرد:

let divsArray = [...document.getElementsByClassName("item")];

🔹 4. تفاوت HTMLCollection و NodeList

✅ خلاصه

• Collections → مجموعه‌ای از عناصر یا Nodeها در DOM

• HTMLCollection → فقط عناصر HTML، زنده، با index دسترسی

• NodeList → Nodeها (Element, Text, Comment)، گاهی زنده، می‌توان forEach استفاده کرد

• تبدیل به آرایه → Array.from() یا اسپرد [...collection]

• انتخاب Collection: getElementsByTagName, getElementsByClassName, querySelectorAll, childNodes