لیست گره های DOM (DOM Node Lists)
«لیست گره های DOM (DOM Node Lists)» یعنی فهرست گره ها در سند. «گره (Node)» هر بخش از صفحه است. این فهرست شبیه آرایه است؛ اما آرایه واقعی نیست. بیشتر وقت ها با querySelectorAll() ساخته می شود.
NodeList چیست؟
شیء NodeList مجموعه ای از گره هاست. این گره ها می توانند عنصر، متن یا ویژگی باشند.
const myNodeList = document.querySelectorAll("p");
دسترسی با اندیس
اندیس از صفر شروع می شود. برای دومین پاراگراف از اندیس 1 استفاده کن.
const myNodeList = document.querySelectorAll("p");
const secondP = myNodeList[1];
ویژگی length
تعداد گره های داخل فهرست را می دهد. برای حلقه ها کاربردی است.
const myNodelist = document.querySelectorAll("p");
const count = myNodelist.length;
حلقه روی NodeList
با for روی همه می چرخیم و مثلاً رنگ متن را تغییر می دهیم.
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
تفاوت NodeList و HTMLCollection
هر دو شبیه آرایه اند و length دارند. اما معمولاً HTMLCollection زنده است؛ تغییر DOM را فوری می بیند. بیشتر NodeListها ایستا هستند؛ با تغییر DOM عوض نمی شوند.
نکته: NodeList آرایه واقعی نیست؛ متدهای push و join کار نمی کنند.
گام های عملی
- با querySelectorAll() یک NodeList بگیر.
- با اندیس به اعضا دسترسی بده.
- با length حلقه بزن و استایل بده.
لینک های مرتبط
- مجموعه های DOM؛ تفاوت با NodeList.
- پیمایش DOM؛ یافتن والد و فرزند.
- لیست گره های DOM؛ صفحه «لیست گره های DOM» همین موضوع.
جمع بندی سریع
- NodeList فهرست گره هاست.
- اندیس از صفر شروع می شود.
lengthبرای شمارش و حلقه است.- آرایه متدها در NodeList نیست.
- NodeList معمولاً ایستا است.