توضح هذه المقالة بإيجاز ما هي طريقة 'click ()' لعنصر DOM وكيفية استخدامها في HTML؟
ما هي طريقة عنصر DOM 'click ()' في HTML؟
عندما يتم استدعاء طريقة click () على عنصر HTML ، فإنها تحاكي نقر المستخدم على العنصر بالماوس ، والذي بدوره يؤدي إلى تشغيل أي معالجات أحداث مرفقة. يتيح ذلك للمطورين تنفيذ العديد من الإجراءات التفاعلية مثل فتح الروابط أو إرسال النماذج أو تبديل رؤية العناصر دون الحاجة إلى نقرة فعلية بالماوس. يساعد هذا في إنشاء صفحات ويب تفاعلية وسريعة الاستجابة.
كيفية استخدام طريقة 'click ()' عنصر DOM في HTML؟
لاستخدام طريقة click () ، يحتاج المستخدمون أولاً إلى الحصول على مرجع لعنصر HTML لمحاكاة النقر. يمكن القيام بذلك باستخدام أي من طرق اجتياز DOM القياسية أو طرق الاستعلام ، مثل ' getElementById '،' getElementsByClassName '،' الاستعلام '، أو ' الاستعلام '.
دعنا نستعرض مثالاً للحصول على شرح أفضل لطريقة 'click ()'.
مثال: مربع اختيار HTML وعناصر زر الراديو
يعتبر أحد الأمثلة التي ' انقر() 'مع مربع اختيار HTML وعناصر زر الاختيار. اتبع الكود أدناه:
< استمارة >
< مدخل
يكتب = 'مربع الاختيار'
بطاقة تعريف = 'checkbox1'
على الفأرة فوق = 'forCheckbox ()'
>
مدعوم من Linuxhint
< مدخل
يكتب = 'مذياع'
بطاقة تعريف = 'زر الراديو'
على الفأرة فوق = 'forRadio ()'
>
مدعوم من Linuxhint
< / استمارة >
في مقتطف الشفرة أعلاه:
- أولاً ، يتم إنشاء مربع اختيار على صفحة الويب باستخدام علامة مع ضبط النوع على ' خانة الاختيار '.
- بعد ذلك يستمع مستمع الحدث ' على الفأرة فوق 'مرفق بمربع الاختيار ويستدعي' forCheckbox () ' وظيفة.
- بنفس الطريقة ، فإن ' مذياع 'باستخدام زر' <إدخال> '، ويتم إرفاق مستمع الحدث بها. لكن هذه المرة ، ' للراديو () 'يتم استدعاء الوظيفة.
بعد إنشاء عنصر HTML على صفحة الويب ، حان الوقت الآن لإضافة ' انقر() ' طريقة:
< النصي >
وظيفة لمربع الاختيار ( ) {
document.getElementById ( 'checkbox1' ) .انقر ( ) ؛
}
وظيفة للراديو ( ) {
document.getElementById ( 'زر الراديو' ) .انقر ( ) ؛
}
< / النصي >
في مقتطف الشفرة أعلاه:
- أولاً ، حدد وظيفتي JavaScript ، ' forCheckbox () ' و ' للراديو () '.
- تستخدم هذه الوظائف ' document.getElementById () 'للحصول على مراجع لعناصر HTML في الصفحة ذات المعرفات المحددة' checkbox1 'و' radioButton '.
- لمحاكاة النقر فوق عنصر HTML ، يتم استخدام طريقة click (). تقوم هذه الوظيفة بتبديل حالة التشغيل أو الإيقاف عند استدعائها.
بعد تنفيذ مقتطفات التعليمات البرمجية أعلاه ، يظهر الإخراج على النحو التالي:
توضح الصورة المتحركة أعلاه أن حالة مربع الاختيار وزر الاختيار تتغير باستخدام طريقة 'click ()'.
خاتمة
تعد طريقة click () مفيدة بشكل خاص للتعامل مع تفاعلات المستخدم مع صفحة ويب من خلال JavaScript.
بدلاً من الاعتماد على المستخدم للنقر فعليًا على العنصر ، استخدم طريقة click () لمحاكاة حدث النقر برمجيًا. إنه مفيد لإنشاء تصميمات تفاعلية وسهلة الاستخدام. لقد أوضحت هذه المقالة بنجاح معنى طريقة 'click ()' لعنصر DOM في HTML.