كيفية الوصول إلى العنصر الأصلي باستخدام خاصية HTML DOMparentElement

Kyfyt Alwswl Aly Al Nsr Alasly Bastkhdam Khasyt Html Domparentelement



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

نظرة عامة على المحتويات

ما هي خاصية 'parentElement' في JavaScript؟

ال ' ParentElement تقوم خاصية '' في JavaScript باسترداد العنصر الذي هو الأصل للعنصر الهدف.

كيفية الوصول إلى/استدعاء العنصر الأصلي عبر خاصية HTML DOMparentElement؟

يمكن الوصول إلى العنصر الأصلي باستخدام HTML DOM ' ParentElement 'الملكية مع' اسم العقدة ' أو استرداد عقدة العنصر الأصلي بدلاً من ذلك عبر ' عقدة الأم ' ملكية.





بناء الجملة



العقدة. ParentElement

قيمة الإرجاع
تسترد هذه الخاصية كائن عنصر يمثل عقدة العنصر الأصلية للعقدة وتعطي ' باطل 'إذا كانت العقدة لا تشتمل على أحد الوالدين.



الأساليب والخصائص المشتركة المستخدمة

document.querySelector() : تحصل هذه الطريقة على العنصر الأول المطابق لمحدد CSS.



بناء الجملة

وثيقة. querySelector ( هذا )

في هذا النحو ' هذا ' يشير إلى واحد أو أكثر من محددات CSS.



document.getElementById() : يقوم بإرجاع العنصر الذي يحتوي على المعرف المحدد.

بناء الجملة

وثيقة. getElementById ( بطاقة تعريف )

هنا، ' بطاقة تعريف ' يشير إلى معرف العنصر المستهدف المراد جلبه.

الفهرس المحدد : تقوم هذه الخاصية باسترداد فهرس الخيار المحدد من القائمة المنسدلة. ال '-1' الخيار يلغي كافة الخيارات.

اسم العقدة : تسترد هذه الخاصية اسم العقدة.

أطفال : تقوم هذه الخاصية بإرجاع العناصر الفرعية للعنصر كمجموعة.

ExternalHTML : تقوم هذه الخاصية بتخصيص أو استرداد عنصر HTML بالإضافة إلى سماته وعلامات البداية والنهاية.

عقدة الأم : هذه الخاصية المحددة تجلب العقدة الأصلية لعنصر أو عقدة.

ملحوظة : الفرق بين ' ParentElement ' و ' عقدة الأم 'الخاصية هي أن الخاصية السابقة أي 'parentElement' تعطي ' باطل 'إذا كانت العقدة الأصلية لا تعكس عقدة العنصر.

مثال 1: الوصول إلى العنصر الأصلي عبر خاصية 'parentElement' في JavaScript

يستدعي هذا المثال العنصر الأصلي للعنصر ويعرض اسم العقدة (الأصل) الخاصة به عند النقر على الزر.

كود HTML


< لغة البرمجة >
< جسم >
< h1 > خاصيةparentElement في جافا سكريبت < / h1 >
< h2 > اختر اللغة: < / h2 >
< يختار فصل = 'عنصر' >
< خيار > بايثون < / خيار >
< خيار > جافا < / خيار >
< خيار > جافا سكريبت < / خيار >
< / يختار >
< زر عند النقر = 'ديسبلاي بارينت ()' فصل = 'زر' > عرض العنصر الأصلي لعنصر 'الخيار'. < / زر >
< شعبة فصل = 'درجة حرارة' >< / شعبة >< / جسم >
< لغة البرمجة >

في هذا الكود:

  • تحديد المعطى '

    ' و “

    ” العناصر التي تشتمل على عناوين المستوى الأول والمستوى الثاني على التوالي.

  • بعد ذلك قم بإنشاء '<حدد>' العنصر الذي يمثله الفصل المحدد الذي يحتوي على العناصر الفرعية الأخرى، مثل '<الخيار>' .
  • الآن قم بإنشاء زر مرتبط بـ ' عند النقر 'الحدث الذي يعيد التوجيه إلى 'ديسبلاي بارينت ()' وظيفة عند النقر على الزر.
  • وأخيرًا، حدد '<ديف>' العنصر الذي سيتم عرض النتيجة فيه، أي العنصر الأصلي الذي تم الوصول إليه.

كود CSS

>
جسم {
محاذاة النص : مركز ;
لون : #ففف ;
لون الخلفية : رمادي ;
ارتفاع : 100% ;
}
.زر {
ارتفاع : 2rem ;
نصف قطر الحدود : 2 بكسل ;
عرض : 35% ;
هامِش : 2rem آلي ;
عرض : حاجز ;
لون : #ba0b0b ;
المؤشر : المؤشر ;
}
.درجة حرارة {
حجم الخط : 1.5rem ;
وزن الخط : عريض ;
}
>

في كود CSS أعلاه:

  • قم بتصميم صفحة الويب الشاملة باستخدام خصائص 'محاذاة النص' و'لون الخلفية' وما إلى ذلك.
  • وبالمثل، قم بتطبيق التصميم على الزر الذي تم إنشاؤه عبر فئته عن طريق ضبط ارتفاعه وعرضه وعرضه ولونه وما إلى ذلك.
  • أخيرًا، قم بتصميم ' شعبة 'بالإشارة إلى اسم الفئة الخاص بها والذي سيتم عرض العنصر الأصلي الذي تم الوصول إليه.

كود جافا سكريبت



< النصي >
وظيفة this.displayParent ( ) {
كان يحصل = وثيقة. querySelector ( '.عنصر' ) ;
كان هذا = يحصل . خيارات [ يحصل . الفهرس المحدد ] ;
كان ألحق = وثيقة. querySelector ( '.درجة حرارة' ) ;
ألحق. InnerHTML = 'العنصر الأصلي لعنصر الخيار هو -> ' + هذا. ParentElement . اسم العقدة ;
}
النصي >

وفقًا لسطور الكود هذه:

  • تحديد الوظيفة 'ديسبلاي بارينت ()' الذي يصل إلى العنصر '