تفاوت HTMLCollection و NodeList در جاوا اسکریپت

اگر در جاوا اسکریپت با متدهایی مانند getElementsByClassName()، querySelectorAll() یا childNodes کار کرده باشید، احتمالاً با دو ساختار مهم به نام‌های HTMLCollection و NodeList مواجه شده‌اید. بسیاری از توسعه‌دهندگان تازه‌کار این دو را مشابه یکدیگر تصور می‌کنند، در حالی که تفاوت‌های مهمی میان آن‌ها وجود دارد.

در این مقاله به بررسی کامل تفاوت HTMLCollection و NodeList می‌پردازیم.

HTMLCollection چیست؟

HTMLCollection مجموعه‌ای زنده (Live Collection) از عناصر HTML است. این یعنی اگر ساختار DOM تغییر کند، محتوای این مجموعه نیز به صورت خودکار به‌روزرسانی می‌شود.

به عنوان مثال، متدهای زیر یک HTMLCollection برمی‌گردانند:

document.getElementsByClassName("item");
 document.getElementsByTagName("div");

آیا میدانید مدرسه پرنیان، کلاس آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

NodeList چیست؟

NodeList مجموعه‌ای از نودهای DOM است. این نودها می‌توانند شامل عناصر HTML، متن‌ها، کامنت‌ها و سایر انواع نودها باشند.

متدهای زیر معمولاً NodeList برمی‌گردانند:

document.querySelectorAll(".item");
 document.childNodes;

تفاوت‌های اصلی HTMLCollection و NodeList

چه زمانی از HTMLCollection استفاده کنیم؟

اگر نیاز دارید مجموعه عناصر به‌صورت خودکار با تغییرات DOM به‌روزرسانی شود، HTMLCollection گزینه مناسبی است.

مثال:

• شمارش لحظه‌ای عناصر
• رابط‌های کاربری پویا

چه زمانی از NodeList استفاده کنیم؟

اگر قصد دارید روی مجموعه‌ای ثابت از عناصر عملیات انجام دهید و از امکاناتی مانند forEach() بهره ببرید، NodeList انتخاب بهتری است.

امروزه در اکثر پروژه‌های مدرن، توسعه‌دهندگان بیشتر از:

document.querySelectorAll()

استفاده می‌کنند.

اگرچه HTMLCollection و NodeList هر دو مجموعه‌ای از عناصر DOM را نگهداری می‌کنند، اما رفتار آن‌ها کاملاً یکسان نیست. HTMLCollection یک مجموعه زنده از عناصر HTML است، در حالی که NodeList می‌تواند شامل انواع مختلف نودها باشد و در بسیاری از موارد به‌صورت ایستا عمل می‌کند.

شناخت این تفاوت‌ها باعث می‌شود کدهای بهینه‌تر، سریع‌تر و قابل‌نگهداری‌تری در پروژه‌های جاوا اسکریپت بنویسید.