104- دروس جافا سكربت – DOM – JS DOM Navigation

**التنقل في DOM باستخدام JavaScript: شرح مفصل**

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

### ما هو DOM؟

DOM هو تمثيل برمجي للصفحة كهيكل شجري، حيث يكون لكل عنصر (عقدة) مكانه الخاص وعلاقاته مع العناصر الأخرى. يتيح DOM التفاعل مع العناصر وتعديلها وإضافة عناصر جديدة أو حذف قائمة.

### التنقل في DOM

التنقل في DOM يعني الوصول إلى العقد المختلفة في الشجرة. يمكننا التنقل بين العناصر الأبناء، الآباء، والأشقاء باستخدام خصائص JavaScript.

#### الخصائص الأساسية للتنقل:

1. **`parentNode`**: يُستخدم للوصول إلى العنصر الأب لأي عقدة.
2. **`childNodes`**: تُعيد قائمة بجميع العقد الأبناء (تشمل النصوص والعناصر).
3. **`firstChild`** و **`lastChild`**: تُستخدم للوصول إلى أول وآخر ابن للعقدة.
4. **`nextSibling`** و **`previousSibling`**: تُستخدم للتنقل بين الأشقاء في الشجرة.

#### [شركة برمجة مصرية] مثال عملي:

لنعتبر لدينا HTML بسيط كالتالي:

“`html

“`

باستخدام JavaScript، يمكننا التنقل [شركة برمجة مصرية] في هذا الهيكل كالتالي:

// الوصول إلى العنصر الأب
var secondParagraph = document.getElementById('second');
var parentDiv = secondParagraph.parentNode;
console.log(parentDiv.id); // "container"

// الوصول إلى الأشقاء
var firstSibling = secondParagraph.previousSibling;
console.log(firstSibling.textContent); // "First paragraph"

var thirdSibling = secondParagraph.nextSibling;
console.log(thirdSibling.textContent); // "Third paragraph"

// الوصول إلى الأبناء
var container = document.getElementById('container');
var children = container.childNodes;
children.forEach(function(child) {
    if (child.nodeType === 1) { // التأكد من أن العقدة عنصر وليس نصًا
        console.log(child.textContent);
    }
});

### التنقل باستخدام العناصر الخاصة

بالإضافة إلى الخصائص العامة، توفر JavaScript طرقًا أكثر تحديدًا للتنقل في DOM باستخدام العناصر فقط، مما يساعد على تجنب العقد النصية غير المرغوب فيها:

1. **`children`**: تُعيد قائمة بالعناصر الأبناء (تتجاهل العقد النصية).
2. **`firstElementChild`** و **`lastElementChild`**: تُستخدم للوصول إلى أول وآخر عنصر ابن.
3. **`nextElementSibling`** و **`previousElementSibling`**: تُستخدم للتنقل بين الأشقاء من العناصر فقط.

#### مثال عملي باستخدام العناصر:

// الوصول إلى العنصر الأول والأخير
var firstElement = container.firstElementChild;
console.log(firstElement.textContent); // "First paragraph"

var lastElement = container.lastElementChild;
console.log(lastElement.textContent); // "Third paragraph"

// الوصول إلى الأشقاء من العناصر فقط
var nextElement = firstElement.nextElementSibling;
console.log(nextElement.textContent); // "Second paragraph"

### الخلاصة

التنقل في DOM هو جزء أساسي من تطوير الويب الذي يتيح للمطورين التفاعل مع العناصر وتعديلها برمجيًا. باستخدام الخصائص والطرق المتاحة في JavaScript، يمكن للمطورين الوصول إلى العناصر بطرق متعددة، مما يوفر مرونة كبيرة في بناء صفحات ويب ديناميكية وتفاعلية.