سيصف هذا البرنامج التعليمي الإجراء الخاص بالعثور على عنصر DOM بناءً على أي قيمة سمة.
كيفية البحث عن / استرداد عنصر في DOM بناءً على قيمة السمة؟
للعثور على العنصر في DOM بناءً على قيمة السمة ، استخدم ' محدد الاستعلام () ' طريقة. يعطي العنصر الأول الموجود في المستند الذي يطابق قيمة محدد CSS المحددة.
ملحوظة : للحصول على جميع العناصر التي تطابق قيمة المحدد المحدد ، استخدم ' الاستعلاممحدد الكل () ' طريقة.
بناء الجملة
لاستخدام طريقة 'querySelector ()' ، استخدم الصيغة التالية:
وثيقة. الاستعلام ( محدد ) ؛
هنا ، سيكون المحدد معرفًا أو فئة باسم ' #بطاقة تعريف '،' .فصل ':
يمكنك أيضًا استخدام الصيغة المحددة للعثور على العنصر بناءً على قيمة السمة:
وثيقة. الاستعلام ( '[المحدد = 'القيمة']' ) ؛
في الصيغة أعلاه ، ' محدد ' سوف يكون ' بطاقة تعريف ' أو ' فصل '، أو ال ' قيمة ' سوف يكون ' idName ' أو ' اسم الطبقة '.
مثال
في ملف HTML ، أنشئ عنصر div يحتوي على عنوان باستخدام عنصر h4 ، ونص عادي باستخدام علامة ، و div لرسالة ذات المعرف المعين ' رسالة ':
< معرف شعبة = 'div' أسلوب = 'محاذاة النص: مركز ؛' >< h4 فصل = 'ثانية' بطاقة تعريف = 'عنوان' > العثور على عنصر في DOM استنادًا إلى ملف يصف قيمة h4 >
< معرف تمتد = 'مرحباً' > مرحبًا بكم في Linuxhint فترة >
< معرف شعبة = 'رسالة' >
< ع معرف = 'رسالة' > مرحبا يا شباب ! مرحبًا بك في دروس Linuxhint JavaScript التعليمية ص >
شعبة >
شعبة >
ستبدو الصفحة كما يلي:
الآن ، سوف نحصل على العنصر حيث المعرف ' رسالة 'باستخدام' محدد الاستعلام () ' طريقة:
كل عنصر = وثيقة. الاستعلام ( '#رسالة' )أخيرًا ، اطبع العنصر على وحدة التحكم:
وحدة التحكم. سجل ( عنصر ) ؛في الإخراج ، ' شعبة يظهر العنصر 'بالمعرف المخصص له' رسالة '، مما يشير إلى أنه تم استرداد العنصر المطلوب بنجاح:
يمكنك أيضًا الحصول على العنصر باستخدام الصيغة المحددة. هنا ، سوف نحصل على العنصر الذي يكون معرفه ' msg ':
كل عنصر = وثيقة. الاستعلام ( '[id = 'msg']' ) ؛انتاج |
الآن ، قم بتحديث لونه باستخدام ' أسلوب ' ملكية:
عنصر. أسلوب . لون = 'أزرق' ؛كما ترى ، كان النص في ' أخضر '، والآن تم تحديثه إلى' أزرق ':
هذا كل شيء عن العثور على عنصر في DOM بناءً على قيمة السمة.
خاتمة
للعثور على عنصر في DOM بناءً على قيمة السمة ، استخدم ' محدد الاستعلام () 'التي تعطي العنصر الأول في المستند الذي يطابق قيمة محدد CSS المحدد. علاوة على ذلك ، للحصول على جميع العناصر التي تطابق قيمة المحدد المحدد ، استخدم ' الاستعلاممحدد الكل () ' طريقة. وصف هذا البرنامج التعليمي الإجراء الخاص بالعثور على عنصر DOM بناءً على أي قيمة سمة.