الدرس الثامن عشر: التنقل بين عناصر الصفحة (DOM Traversal) في JavaScript

 عند التعامل مع عناصر الصفحة باستخدام DOM، نحتاج أحيانًا إلى الانتقال من عنصر إلى آخر داخل الهيكل الشجري للـ HTML. هذا ما يُعرف بـ DOM Traversal.

---

1. الوصول إلى العنصر الأب (Parent Element)

let element = document.getElementById("child");
console.log(element.parentElement);

• parentElement: يُرجع العنصر الأب المباشر.

---

2. الوصول إلى العناصر الأبناء (Children)

let container = document.getElementById("box");
console.log(container.children);

• children: يُرجع قائمة بجميع العناصر الأبناء (وليس النصوص أو التعليقات).

---

3. الوصول إلى أول وآخر عنصر فرعي

let box = document.getElementById("box");

console.log(box.firstElementChild);  // أول ابن
console.log(box.lastElementChild);   // آخر ابن

---

4. الوصول إلى العنصر السابق والتالي

let item = document.getElementById("item");

console.log(item.previousElementSibling); // العنصر السابق
console.log(item.nextElementSibling);     // العنصر التالي

---

5. مثال عملي:

<ul id="menu">
  <li>الرئيسية</li>
  <li id="about">حول</li>
  <li>اتصل بنا</li>
</ul>

let about = document.getElementById("about");

// العنصر السابق
console.log(about.previousElementSibling.textContent); // الرئيسية

// العنصر التالي
console.log(about.nextElementSibling.textContent); // اتصل بنا

---

✅ ملخص الدرس:

الطريقة	الوظيفة
element.parentElement	الوصول إلى العنصر الأب
element.children	الوصول إلى جميع الأبناء (كـ HTML عناصر)
firstElementChild	أول ابن
lastElementChild	آخر ابن
previousElementSibling	العنصر السابق
nextElementSibling	العنصر التالي