TechCodeview

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

سنلقي نظرة هنا على مجموعة متنوعة من الأساليب المستندة إلى JavaScript لتحقيق ذلك.

يمكن العثور على العنصر الأصل لعنصر HTML باستخدام السمةparentNode، وهي الطريقة الأسهل. عندما يتم توفير عنصر، تقوم هذه السمة بإرجاع العقدة الأصلية للعنصر في شجرة DOM. يتم توضيح استخدام هذه السمة من خلال المثال التالي:

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode; 

يتم استخدام طريقة getElementById في مقتطف التعليمات البرمجية أعلاه لاختيار العنصر الفرعي أولاً حسب المعرف. بعد ذلك، نستخدم سمةparentNode لتعيين العنصر الأصل لمتغيرparentElement.

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

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement; 

باستخدام طريقة أكثر توضيحية ومفهومة، يمكننا تحقيق نفس النتيجة باستخدام السمةparentElement.

الاستفادة من الطريقة الأقرب (): الطريقة الأقرب () هي أداة فعالة أخرى تقدمها المتصفحات المعاصرة.

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

 const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class'); 

يتم بعد ذلك استدعاء الدالة الأقرب () في الكود أعلاه، وتوفير محدد CSS كوسيطة، بعد استخدام طريقة getElementById لتحديد العنصر الفرعي. يتم إرجاع الأصل الأول للعنصر الذي يطابق التحديد المحدد بواسطة الدالة الأقرب ().

في هذه الحالة، العنصر ذو الفئة 'parent-class' والذي يعد أقرب سلف للعنصر الفرعي هو ما نحاول العثور عليه.

استخدام طرق الاجتياز: يمكنك التنقل حول شجرة DOM باستخدام إحدى طرق الاجتياز العديدة التي توفرها JavaScript. من بينها الأساليبparentNode، وpreviousSibling، وnextSibling، وfirstChild، وlastChild. يمكنك الانتقال إلى العنصر الأصلي لعنصر معين من خلال الجمع بين هذه التقنيات. وكمثال على ذلك، ضع في اعتبارك ما يلي

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode; 

في هذا السطر من التعليمات البرمجية، نستخدم أولاً getElementById لاختيار العنصر الفرعي، ثم نستخدم خاصيةparentNode للحصول على العنصر الأصلي الخاص بها. تتيح لك تقنيات الاجتياز هذه التنقل لأعلى ولأسفل في شجرة DOM لتحديد موقع العنصر الأصلي أو العنصر الفرعي المطلوب.

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

هنا مثال توضيحي:

 const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); 

باستخدام querySelectorAll، نختار جميع المكونات في نموذج التعليمات البرمجية أعلاه والتي تحتوي على 'زر' الفئة. بعد ذلك، يحتوي كل زر على مستمع حدث نقرة مرفق باستخدام الدالة forEach.

نستخدم events.target.parentElement للوصول إلى العنصر الأصلي داخل معالج الأحداث. ونتيجة لذلك، عند النقر على الزر، يمكننا اتخاذ إجراء بشأن العنصر الأصلي.

طرق السلسلة في جافا

استخدام خاصية العنصر الأصل مع العناصر الديناميكية:

يمكنك الوصول إلى الظروف التي تحتاج فيها إلى الوصول إلى العنصر الأصلي لعنصر تم تشكيله حديثًا إذا كنت تعمل مع العناصر التي تم إنشاؤها ديناميكيًا في تطبيق الويب الخاص بك.

بعد إضافة العنصر إلى DOM، يمكنك استخدام خاصية العنصر الأصلية في ظروف معينة.

على سبيل المثال، ضع في اعتبارك ما يلي:

 const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } 

في هذا السطر من التعليمات البرمجية، نستخدم أولاً getElementById لاختيار العنصر الأصلي. بعد ذلك، باستخدام وظيفة appendChild داخل وظيفة createNewElement، نقوم بإنشاء عنصر جديد، وتعديله حسب الضرورة، وإضافته إلى العنصر الأصلي.

باستخدام الخاصيةparentElement، يمكننا الحصول على العنصر الأصلي للعنصر الجديد بعد إضافته إلى DOM.

اتصال جافا

باستخدام خاصية offsetParent:

في بعض الحالات، قد ترغب في العثور على العنصر الذي يمثل أقرب موقع لعنصر معين. يمكنك تحقيق ذلك باستخدام خاصية offsetParent. يتم إرجاع أقرب عنصر سلف بموضع غير ثابت، وهو الموضع الافتراضي.

وهنا رسم توضيحي:

 const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent; 

في مقتطف التعليمات البرمجية المذكور أعلاه، نستخدم أولاً طريقة getElementById لاختيار العنصر الفرعي، ثم يتم استخدام سمة OffsetParent لتعيين أقرب عنصر سلف محدد للمتغير المسمى PositionedAncestor.

استخدام خاصيةparentNode مع أنواع العقد المختلفة:

يمكنك التنقل في شجرة DOM والوصول إلى الأصل لعدة أنواع من العقد، مثل العقد النصية وعقد التعليق، بالإضافة إلى الوصول إلى العنصر الأصلي لعنصر HTML.

يمكنك التنقل بسهولة أكبر في شجرة DOM باستخدام الخاصيةparentNode، والتي تعمل مع أنواع العقد المختلفة. على سبيل المثال، ضع في اعتبارك ما يلي:

 const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode; 

في هذا المثال، نستخدم الدالة createTextNode لإنتاج عقدة نصية. يتم بعد ذلك استخدام الخاصيةparentNode لاسترداد العنصر الأصل. عند التعامل مع هياكل DOM المعقدة التي تحتوي على مجموعة متنوعة من العقد، يمكن أن تكون هذه الإستراتيجية مفيدة.

استخدام خاصيةparentElement مع Shadow DOM:

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

في هذه الحالة، الخاصيةparentElement قابلة للتطبيق أيضًا.

على سبيل المثال، ضع في اعتبارك ما يلي:

 const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement; 

يتم استخدام سمة ShadowRoot للعنصر المضيف في الكود أعلاه للحصول على جذر الظل أولاً. باستخدام الدالة getElementById، نختار بعد ذلك العنصر الفرعي ضمن جذر الظل بناءً على معرفه.

باستخدام الخاصيةparentElement، يمكننا أخيرًا استرداد العنصر الأصل. يتيح لك ذلك الوصول إلى العنصر الأصلي حتى داخل Shadow DOM.

العناصر الموضوعة باستخدام خاصية OffParent :

يمكنك استخدام الخاصية OffsetParent بالتزامن مع الخاصيتين OffsetLeft وoffsetTop لتحديد موقع العنصر الأصلي الأقرب لعنصر معين إذا كنت بحاجة إلى القيام بذلك بشكل صريح.

10 قوة 6

هنا مثال توضيحي:

 const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } 

باستخدام getElementById، نختار أولاً العنصر الهدف في هذا السطر من التعليمات البرمجية. بعد ذلك، يتم استخدام OffsetParent للعنصر الهدف لتهيئة متغير PositionedAncestor.

الخطوة التالية هي تحديد ما إذا كان موضع السلف الحالي له موضع محسوب 'ثابت' باستخدام حلقة while.

يتم تحديث PositionedAncestor إلى OffsetParent الخاص بـ PositionedAncestor الحالي إذا حدث ذلك.

تستمر هذه العملية حتى نحدد موقع السلف الأقرب إلى موقعنا الحالي أو نصل إلى قمة شجرة DOM.

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

اختر تقنية تلبي متطلباتك الفريدة وتحسن مهاراتك في التعامل مع DOM.

إذا كنت تستخدم أساليب أو ميزات أحدث، فلا تنس إجراء اختبار شامل للتعليمات البرمجية الخاصة بك في مجموعة متنوعة من المتصفحات للتحقق من التوافق.

سيتم تزويدك بالمعرفة والقدرات اللازمة للعمل مع العناصر الرئيسية في JavaScript وبناء تجارب ديناميكية وتفاعلية عبر الإنترنت بعد أن يكون لديك فهم قوي لهذه المفاهيم.

لديك الآن طرق إضافية متاحة لك في JavaScript للوصول إلى العنصر الأصلي.

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

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