106- دروس جافا سكربت – DOM – JS DOM Collections

**شرح مفصل لـ JS DOM Collections في لغة JavaScript**

تعتبر DOM Collections واحدة من المفاهيم الأساسية عند التعامل مع DOM (Document Object Model) في JavaScript. DOM هو الواجهة البرمجية [شركة برمجة مصرية] التي تربط بين صفحات الويب وJavaScript، مما يسمح لك بالتفاعل مع عناصر HTML وتعديلها برمجيًا. DOM Collections هي مجموعات من العناصر التي تمثل جزءًا من المستند، وتتيح لك العمل مع عدة عناصر في وقت واحد.

### أنواع DOM Collections

1. **HTMLCollection**
– **وصف**: هي مجموعة ديناميكية من العقد (nodes) التي يمكن أن تحتوي على عناصر HTML فقط. تتغير تلقائيًا عند إضافة أو إزالة عناصر من DOM.
– **كيفية الوصول إليها**: يمكنك الوصول إلى HTMLCollection باستخدام خصائص مثل `document.forms` أو `document.images`.
– **مثال**:

// الوصول إلى جميع النماذج في المستند
     const forms = document.forms;
     console.log(forms); // HTMLCollection تحتوي على جميع عناصر <form>
     

2. **NodeList**
– **وصف**: تشبه HTMLCollection ولكنها يمكن أن تحتوي على أنواع أخرى من العقد مثل النصوص والتعليقات. على عكس HTMLCollection، قد لا تكون NodeList ديناميكية.
– **كيفية الوصول [شركة برمجة مصرية] إليها**: يمكن الحصول على NodeList باستخدام `document.querySelectorAll()` أو `Node.childNodes`.
– **مثال**:

// الحصول على جميع العناصر <p> في المستند
     const paragraphs = document.querySelectorAll('p');
     paragraphs.forEach(paragraph => {
       console.log(paragraph.textContent); // طباعة النص لكل عنصر <p>
     });
     

### الفروقات الرئيسية بين HTMLCollection وNodeList

– **الديناميكية**: HTMLCollection ديناميكية دائمًا، بينما NodeList يمكن أن تكون ديناميكية أو ثابتة بناءً على الطريقة التي تم إنشاؤها بها.
– **الأساليب المستخدمة**: HTMLCollection لا يمكن استخدام `forEach` مباشرة عليها، بينما NodeList تدعم `forEach` إذا كانت ثابتة.
– **المحتوى**: HTMLCollection تحتوي على عناصر HTML فقط، بينما NodeList يمكن أن تحتوي على أنواع أخرى من العقد.

### التعامل مع DOM Collections

يمكنك استخدام حلقات `for` التقليدية أو تحويل DOM Collections إلى مصفوفات لاستخدام الأساليب الحديثة مثل `map` و`filter`.

#### مثال لتحويل HTMLCollection إلى مصفوفة:

// تحويل HTMLCollection إلى مصفوفة
const images = Array.from(document.images);
images.forEach(image => {
  console.log(image.src); // طباعة الرابط لكل صورة
});

#### مثال لاستخدام `for` مع NodeList:

// استخدام حلقة for مع NodeList
const divs = document.querySelectorAll('div');
for (let i = 0; i < divs.length; i++) {
  divs[i].style.backgroundColor = 'lightblue'; // تغيير لون الخلفية لكل <div>
}

### الخاتمة

تمثل DOM Collections جزءًا مهمًا من العمل مع DOM في JavaScript، حيث توفر لك وسيلة فعالة للتفاعل مع مجموعات من العناصر. فهم الفروقات بين HTMLCollection وNodeList وكيفية التعامل مع كل منهما يمكن أن يساعدك في كتابة كود أكثر كفاءة ومرونة عند تطوير تطبيقات الويب. باستخدام الأدوات والأساليب المناسبة، يمكنك معالجة وتعديل DOM بطرق تتيح لك إنشاء تجارب مستخدم غنية وتفاعلية.