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