در DOM، وقتی چند Node را انتخاب می‌کنیم، مرورگر آن‌ها را به صورت NodeList برمی‌گرداند.
NodeList شبیه آرایه است اما تمام ویژگی‌های آرایه را ندارد.

🔹 1. ایجاد و دریافت NodeList

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

  • document.querySelectorAll(selector) → غیر زنده (Static)

  • element.childNodes → زنده (Live)

let items = document.querySelectorAll(".item");
console.log(items); // NodeList غیر زنده

let container = document.getElementById("container");
console.log(container.childNodes); // NodeList زنده

🔹 2. ویژگی‌ها و تفاوت با آرایه

• می‌توان به عناصر با index دسترسی داشت

console.log(items[0]);

• طول مجموعه:

console.log(items.length);

• NodeList برگشتی از querySelectorAll() غیر زنده است → تغییرات DOM بعد از انتخاب اعمال نمی‌شوند

• NodeList برگشتی از childNodes زنده است → تغییرات DOM را دنبال می‌کند

🔹 3. پیمایش NodeList

• روش‌های رایج:

  • for

  • for...of

  • forEach

// for
for(let i = 0; i < items.length; i++){
  items[i].style.color = "blue";
}

// for...of
for(let item of items){
  item.style.fontWeight = "bold";
}

// forEach
items.forEach(item => item.style.backgroundColor = "yellow");

نکته: فقط NodeList برگشتی از querySelectorAll() قابلیت forEach دارد.

🔹 4. تبدیل NodeList به آرایه

• برای استفاده از تمام متدهای آرایه:

let itemsArray = Array.from(items);
itemsArray.map(item => item.style.border = "1px solid black");

• یا با اسپرد:

let itemsArray = [...items];

🔹 5. ویژگی‌های NodeList

✅ خلاصه

• NodeList → مجموعه‌ای از Nodeها در DOM

• ایجاد: querySelectorAll() (Static), childNodes (Live)

• دسترسی: items[index] یا item(index)

• پیمایش: for, for...of, forEach

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

• تفاوت با HTMLCollection: NodeList شامل تمام Nodeها است و می‌تواند غیر زنده باشد