107- دروس جافا سكربت – DOM – JS DOM Node Lists

### مقدمة إلى JS DOM Node Lists

في عالم تطوير الويب، تعدّ DOM (Document Object Model) واحدة من الركائز الأساسية التي تتيح للمطورين التعامل مع مستندات HTML وXML بشكل برمجي. DOM توفر واجهة برمجية تمكّن من التفاعل مع وثائق الويب وتعديل هيكلها ومحتواها وأسلوب عرضها. في هذا السياق، تأتي Node Lists كعنصر هام في التعامل مع مجموعة من العناصر التي يتم إرجاعها عند استخدام بعض الدوال في JavaScript.

### ما هي Node Lists؟

Node List هي مجموعة تشبه المصفوفة (array-like) تحتوي على مجموعة من العقد (nodes) في DOM. تُرجع Node Lists عند استخدام دوال مثل `document.querySelectorAll()` أو عند الوصول إلى خصائص مثل `childNodes`. على الرغم من أن Node Lists تشبه المصفوفات، إلا أنها ليست مصفوفات حقيقية، مما يعني أنه لا يمكننا استخدام جميع دوال المصفوفات القياسية عليها مباشرة.

### أنواع Node Lists

1. **Static Node List**: يتم إنشاؤها مرة واحدة ولا تتغير حتى إذا تغيرت الشجرة الأصلية للـ DOM. مثال على ذلك هو استخدام `document.querySelectorAll()`.

2. **Live Node List**: يتم تحديثها تلقائيًا لتعكس التغييرات في DOM. مثال على ذلك هو خاصية `childNodes`.

### كيفية استخدام Node Lists

لنلقِ نظرة على بعض الأمثلة العملية لفهم كيفية التعامل مع Node Lists.

#### مثال 1: استخدام `querySelectorAll()`

// الحصول على جميع العناصر التي تحتوي على الكلاس 'item'
var items = document.querySelectorAll('.item');

// طباعة عدد العناصر
console.log('Number of items:', items.length);

// طباعة النصوص  [شركة برمجة مصرية] لكل عنصر
items.forEach(function(item) {
    console.log(item.textContent);
});

في هذا المثال، `querySelectorAll()` تُرجع Node List تحتوي على جميع العناصر التي تحتوي على الكلاس “item”. لاحظ أننا استخدمنا `forEach` هنا، وهو مدعوم على Node Lists في المتصفحات الحديثة.

#### مثال 2: استخدام `childNodes`

// الحصول على العقد الفرعية للعنصر
var parent = document.getElementById('parent');
var childNodes = parent.childNodes;

// طباعة نوع كل عقدة
childNodes.forEach(function(node) {
    console.log(node.nodeType);
});

في هذا المثال، `childNodes` تُرجع Live Node List تحتوي على جميع العقد الفرعية (بما في ذلك النصوص والفواصل) للعنصر ذو المعرف “parent”.

### تحويل Node List إلى مصفوفة

في بعض الأحيان، قد تحتاج إلى تحويل Node List إلى مصفوفة حقيقية لاستخدام دوال المصفوفات مثل `map` أو `filter`. يمكن القيام بذلك باستخدام `Array.from()` أو `spread operator`.

var itemsArray = Array.from(document.querySelectorAll('.item'));

// أو باستخدام spread operator
var itemsArray2 = [...document.querySelectorAll('.item')];

// الآن يمكننا استخدام دوال المصفوفات
var itemTexts = itemsArray.map(item => item.textContent);
console.log(itemTexts);

### الخاتمة

Node Lists هي أداة قوية في جعبة المطورين عندما يتعلق الأمر بالتفاعل مع DOM. فهم الاختلافات بين الـ Static وLive Node Lists وكيفية التعامل معها يمكن أن يسهل عملية تطوير التطبيقات والتأكد [شركة برمجة مصرية] من أنها تعمل بكفاءة. مع التحسينات الحديثة في JavaScript، أصبحت عمليات التحويل والتعامل مع Node Lists أكثر سهولة ومرونة.