JavaScript Academy · درس

التنقل بين العناصر الأصلية والفرعية والشقيقة

تنقّلوا في شجرة DOM بين العقد المرتبطة.

الدرس 3 من 413 خطوة

التنقل بين العناصر الأصلية والفرعية والشقيقة درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

لماذا نتنقل في DOM؟

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

parentElement

يوفر لك parentElement العنصر الذي يحتوي على العنصر الحالي، أو يعيد null عند أعلى الشجرة.

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

children

تمثل children مجموعة HTMLCollection حيّة تتضمن العناصر الأبناء المباشرين للعنصر (وتُستبعد العقد النصية).

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild و lastElementChild

ينتقل هذان الخاصيتان مباشرةً إلى أول عنصر ابن أو آخره، مع تجاوز أي عقد نصية أو تعليقات.

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

يعيد nextElementSibling العنصر الموجود مباشرةً بعد العنصر الحالي ضمن الأب نفسه.

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

ينتقل previousElementSibling في الاتجاه الآخر. ويعيد كلاهما null عند عدم وجود عنصر شقيق.

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

خصائص العناصر مقارنةً بخصائص العقد

انتبه: تتضمن childNodes وnextSibling وparentNode العقد النصية (بما فيها المسافات البيضاء). وعادةً ما تكون إصدارات *Element* هي ما تحتاج إليه.

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

يتنقل closest صعودًا في الشجرة بدءًا من العنصر الحالي، ويعيد أقرب عنصر سلف (أو العنصر نفسه) يطابق محددًا.

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

closest لتفويض الأحداث

يكون closest مناسبًا جدًا عندما تصل النقرة إلى عنصر داخلي، لكنك تحتاج إلى الحاوية الخارجية التي تتولى معالجتها.

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

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

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

دمج خطوات التنقل

يمكنك ربط خطوات التنقل للتعامل مع البنى المعقدة، مثل الانتقال من زر إلى صفه ثم إلى الصف التالي.

const next = btn.closest("tr").nextElementSibling;

تحقق سريع

اختر الخاصية الصحيحة.

أجب عليها في الدرس التفاعلي

مراجعة

يمكنك الانتقال إلى الأعلى باستخدام parentElement وclosest، وإلى الأبناء باستخدام children وfirstElementChild وlastElementChild، وإلى الجانبين باستخدام nextElementSibling وpreviousElementSibling. فضّل الخصائص التي تقتصر على العناصر لتجاوز العقد النصية الخاصة بالمسافات البيضاء.

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 59
الدروس: 200

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «التنقل بين العناصر الأصلية والفرعية والشقيقة» مجاني؟

نعم — نص درس «التنقل بين العناصر الأصلية والفرعية والشقيقة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «التنقل بين العناصر الأصلية والفرعية والشقيقة»؟

تنقّلوا في شجرة DOM بين العقد المرتبطة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «التنقل بين العناصر الأصلية والفرعية والشقيقة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تحديد العناصر باستخدام querySelector
getElementById وgetElementsByClassName
التنقل بين العناصر الأصلية والفرعية والشقيقة
NodeList مقابل HTMLCollection

← العودة إلى JavaScript Academy