ما المقصود بخاصية العنصر السابق لعنصر DOM في HTML في JavaScript

Ma Almqswd Bkhasyt Al Nsr Alsabq L Nsr Dom Fy Html Fy Javascript



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

يشرح هذا المنشور خاصية عنصر HTML DOM 'previousElementSibling' باستخدام JavaScript.

ما هي خاصية HTML DOM Element 'previousElementSibling'؟

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







بناء الجملة



عنصر. العنصر السابق

تسترجع هذه الصيغة ' خيط 'يحتوي على محتوى HTML للشقيق السابق ، و' باطل 'إذا لم يكن موجودًا.







دعنا نستخدم بناء الجملة المحدد أعلاه عمليًا لإظهار عمل خاصية 'previousElementSibling'.



مثال: تطبيق خاصية 'previousElementSibling' لإعادة محتوى الأخ السابق

يطبق هذا المثال خاصية JavaScript 'previousElementSibling' للحصول على محتوى HTML للأشقاء السابق.

كود HTML

أولاً ، نظرة عامة على كود HTML التالي:

< ماي >
< الذي - التي بطاقة تعريف = 'أولاً' > لغة البرمجة < / الذي - التي >
< الذي - التي بطاقة تعريف = 'ثانية' > CSS < / الذي - التي >
< الذي - التي بطاقة تعريف = 'ثالث' > جافا سكريبت < / الذي - التي >
< / ماي >
< ص بطاقة تعريف = 'ل' > < / ص >

في سطور الكود أعلاه:

  • ال '
      ”يضيف قائمة غير مرتبة.
    • داخل القائمة غير المرتبة ، يتم تضمين عناصر متعددة باستخدام ' <هذا> 'مع المعرفات المخصصة لهم.
    • أخيرًا ، '

      'العلامة يدمج فقرة فارغة مع معرف فريد' الفقرة '.

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

    الآن ، تابع مع كود JavaScript:

    < النصي >
    اسمحوا البند = وثيقة. getElementById ( 'ثالث' ) . العنصر السابق . داخلي HTML ؛
    وثيقة. getElementById ( 'ل' ) . داخلي HTML = ' الشقيق السابق للعنصر الثالث :' + غرض ؛
    النصي >

    وفقًا لمقتطف الشفرة أعلاه:

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

    انتاج |

    كما رأينا ، تظهر النتيجة الأخ السابق للعنصر المستهدف ، أي (JavaScript).

    خاتمة

    توفر JavaScript عنصر DOM المحدد مسبقًا ' العنصر السابق 'لاسترداد شقيق العنصر السابق. تقوم بإرجاع الأخ السابق لعنصر من نفس مستوى الشجرة حيث يقع العنصر الهدف. أوضح هذا المنشور بعمق خاصية عنصر HTML DOM 'previousElementSibling' في JavaScript.