NodeList مقابل HTMLCollection
افهموا الفروق بين مجموعات العناصر.
NodeList مقابل HTMLCollection درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
نوعا المجموعات
تعيد أساليب DOM أحد كائنين شبيهين بالقوائم: NodeList أو HTMLCollection. يبدوان متشابهين، لكنهما يختلفان في جوانب مهمة.
مصدر NodeList
يعيد كل من querySelectorAll وchildNodes كائنات NodeList. أما الكائن الناتج من querySelectorAll فهو ثابت: لقطة مأخوذة وقت تنفيذ الاستعلام.
const items = document.querySelectorAll(".item"); // static NodeListمصدر HTMLCollection
تعيد كل من getElementsByClassName وgetElementsByTagName وخصيصة children كائنات HTMLCollection حيّة.
const items = document.getElementsByClassName("item"); // live HTMLCollectionثابتة مقابل حيّة
تحافظ NodeList الثابتة على محتوياتها الأصلية حتى عند تغيّر DOM. أما HTMLCollection الحيّة فتعكس الإضافات والإزالات تلقائيًا.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notدعم forEach
تتضمن NodeList دالة forEach مضمّنة. أما HTMLCollection فلا تتضمنها، لذا يجب تحويلها أو استخدام حلقة تعتمد على الفهرس.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});ليستا مصفوفة حقيقية
كلتاهما شبيهة بالمصفوفة: تتضمنان length والوصول باستخدام الفهرس، لكنهما تفتقران إلى map وfilter وreduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedالتحويل باستخدام Array.from
تحوّل Array.from أيًا من المجموعتين إلى مصفوفة حقيقية، مما يتيح استخدام جميع أساليب المصفوفات.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);التحويل باستخدام Spread
يوفر معامل النشر بديلًا موجزًا ينتج أيضًا مصفوفة حقيقية.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);فخ التكرار على القائمة الحيّة
يؤدي حذف العناصر أثناء التكرار على HTMLCollection حيّة إلى تغيير الفهارس وتجاوز بعض العناصر. حوّلها أولًا إلى مصفوفة للتكرار بأمان.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeالفهرسة في كليهما
يدعم كلاهما الفهرسة الرقمية وlength، لذلك يبدو الوصول الأساسي متطابقًا رغم اختلاف سلوكيهما الداخلي.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);اختيار النوع المناسب
استخدم querySelectorAll عندما تريد لقطة مستقرة وforEach مضمّنة. واستخدم المجموعات الحية عندما تحتاج تحديدًا إلى بقاء القائمة متزامنة مع DOM.
تحقق سريع
اكتشف الفرق.
مراجعة
تكون NodeList (من querySelectorAll) ثابتةً وتتضمن forEach، بينما تكون HTMLCollection (من getElementsByClassName وgetElementsByTagName وchildren) حيّةً ولا تتضمن forEach. لا تمثل أي منهما مصفوفة حقيقية؛ استخدم Array.from أو النشر للتحويل قبل استخدام map/filter/reduce، وللتكرار بأمان أثناء إجراء التعديلات.
الأسئلة الشائعة
هل درس «NodeList مقابل HTMLCollection» مجاني؟
نعم — نص درس «NodeList مقابل HTMLCollection» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «NodeList مقابل HTMLCollection»؟
افهموا الفروق بين مجموعات العناصر. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «NodeList مقابل HTMLCollection»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تحديد العناصر باستخدام querySelector
- getElementById وgetElementsByClassName
- التنقل بين العناصر الأصلية والفرعية والشقيقة
- NodeList مقابل HTMLCollection