التنقل بين العناصر في لغة JavaScript

التنقل بين العناصر في لغة JavaScript

يا هلا والله! اليوم بنتكلم عن موضوع مهم ومفيد جداً في جافاسكريبت، وهو كيف تتنقل بين عناصر الـ DOM (Document Object Model). يعني لو عندك عنصر معين في صفحتك، كيف تقدر توصل لأبوه، عياله، أو إخوانه؟ الموضوع بسيط ومباشر، ويالله نبدأ!

عنصر الأب (Parent Element)

عشان توصل للعنصر الأب لأي عنصر عندك، فيه طريقتين رئيسيتين:

  • parentElement: هذي الطريقة هي الأفضل غالباً لأنها ترجع لك عنصر HTML فقط.
  • parentNode: هذي ترجع لك أي نوع من أنواع الـ Node (ممكن يكون عنصر، نص، تعليق، إلخ). لكن في أغلب الأحيان، بتكون عنصر HTML.

مثال:


const childElement = document.getElementById('myChild');
const parent = childElement.parentElement; // هذا بيرجع لك العنصر الأب كـ HTML
console.log(parent);

ملاحظة: إذا العنصر اللي اخترته ما عنده أب (مثل <html> نفسه)، بيرجع لك null.

العناصر الأبناء (Child Elements)

لو عندك عنصر أب وتبغى توصل لعياله، فيه كذا طريقة:

كل الأبناء:

  • children: هذي ترجع لك HTMLCollection تحتوي على كل عناصر HTML الأبناء المباشرين. ما تشمل Nodes اللي تكون نصوص أو تعليقات.
  • childNodes: هذي ترجع لك NodeList تشمل كل أنواع الـ Nodes (عناصر، نصوص، تعليقات). غالباً بتشوف نصوص فارغة بين العناصر بسبب المسافات أو الأسطر الجديدة في HTML، فـ children أفضل إذا تبغى بس العناصر.

مثال:


const parentElement = document.getElementById('myParent');
const children = parentElement.children; // بيرجع لك HTMLCollection من الأبناء العناصر
console.log(children);

// تقدر تتنقل بينهم زي الأراي (لكنها مو أراي حقيقية)
for (let i = 0; i < children.length; i++) {
    console.log(children[i].tagName);
}

أول وآخر ابن:

  • firstElementChild: يرجع لك أول عنصر ابن كـ HTML.
  • lastElementChild: يرجع لك آخر عنصر ابن كـ HTML.
  • firstChild: يرجع أول Node (ممكن يكون نص أو تعليق).
  • lastChild: يرجع آخر Node.

مثال:


const parentElement = document.getElementById('myParent');
const firstChild = parentElement.firstElementChild;
const lastChild = parentElement.lastElementChild;
console.log('أول ابن:', firstChild);
console.log('آخر ابن:', lastChild);

العناصر الأشقاء (Sibling Elements)

إذا عندك عنصر وتبغى توصل للعناصر اللي بنفس مستواه (إخوانه)، فيه هذي الطرق:

  • nextElementSibling: يرجع لك العنصر الشقيق التالي كـ HTML.
  • previousElementSibling: يرجع لك العنصر الشقيق السابق كـ HTML.
  • nextSibling: يرجع لك الـ Node الشقيق التالي (ممكن يكون نص أو تعليق).
  • previousSibling: يرجع لك الـ Node الشقيق السابق.

مثال:


const currentElement = document.getElementById('myCurrentElement');
const nextSibling = currentElement.nextElementSibling;
const prevSibling = currentElement.previousElementSibling;
console.log('الشقيق التالي:', nextSibling);
console.log('الشقيق السابق:', prevSibling);

ملاحظة: إذا ما فيه شقيق تالي أو سابق، بيرجع لك null.

مثال عملي (Practical Example)

خلونا نشوف كيف نطبق هالكلام كله في سيناريو حقيقي. تخيل عندك قائمة <ul> وفيها عناصر <li>، وتبغى توصل لعنصر معين وتغير لونه، وبعدين توصل لأبوه وتضيف له كلاس، وبعدين توصل لإخوانه وتغير لونهم بعد.

هذا كود الـ HTML:


<ul id="myList">
    <li>بند 1</li>
    <li id="targetItem">بند 2 (الهدف)</li>
    <li>بند 3</li>
</ul>

وهذا كود الـ JavaScript:


// 1. نوصل للعنصر الهدف
const targetItem = document.getElementById('targetItem');
console.log('العنصر الهدف:', targetItem.textContent);

// 2. نغير لونه
targetItem.style.backgroundColor = '#ffdbd8'; // لون أحمر فاتح

// 3. نوصل لأبوه (الـ ul) ونضيف له كلاس
const parentList = targetItem.parentElement;
parentList.classList.add('highlighted-list');
console.log('أبو العنصر الهدف:', parentList.tagName);

// 4. نوصل لإخوانه (الأشقاء) ونغير لونهم
let next = targetItem.nextElementSibling;
while (next) {
    next.style.backgroundColor = '#e0f7fa'; // لون أزرق فاتح
    console.log('شقيق تالي:', next.textContent);
    next = next.nextElementSibling;
}

let prev = targetItem.previousElementSibling;
while (prev) {
    prev.style.backgroundColor = '#e0f7fa'; // لون أزرق فاتح
    console.log('شقيق سابق:', prev.textContent);
    prev = prev.previousElementSibling;
}

// لو تبغى تشوف كل الأبناء للـ ul
console.log('كل أبناء القائمة:');
Array.from(parentList.children).forEach(child => {
    console.log('- ' + child.textContent);
});

كذا، أنت صرت محترف في التنقل بين عناصر الـ DOM باستخدام جافاسكريبت! طبق الأمثلة وجرب بنفسك عشان ترسخ المعلومة.