இந்தக் கட்டுரையில் DOM உறுப்பு என்ன “கிளிக்()” முறை மற்றும் அதை HTML இல் எவ்வாறு பயன்படுத்துவது?
HTML இல் DOM உறுப்பு 'கிளிக்()' முறை என்ன?
கிளிக்() முறை ஒரு HTML உறுப்பில் அழைக்கப்படும் போது, ஒரு பயனர் சுட்டியைக் கொண்டு உறுப்பைக் கிளிக் செய்வதை உருவகப்படுத்துகிறது, இது இணைக்கப்பட்ட நிகழ்வு ஹேண்ட்லர்களைத் தூண்டுகிறது. இணைப்புகளைத் திறப்பது, படிவங்களைச் சமர்ப்பித்தல் அல்லது உறுப்புகளின் தெரிவுநிலையை மாற்றுவது போன்ற பல ஊடாடும் செயல்களைச் செய்ய இது டெவலப்பர்களை அனுமதிக்கிறது. இது ஊடாடும் மற்றும் பதிலளிக்கக்கூடிய இணையப் பக்கங்களை உருவாக்க உதவுகிறது.
HTML இல் DOM உறுப்பு 'கிளிக்()' முறையை எவ்வாறு பயன்படுத்துவது?
கிளிக்() முறையைப் பயன்படுத்த, பயனர்கள் முதலில் ஒரு கிளிக்-ஐ உருவகப்படுத்த HTML உறுப்புக்கான குறிப்பைப் பெற வேண்டும். நிலையான DOM டிராவர்சல் அல்லது வினவல் முறைகளில் ஏதேனும் ஒன்றைப் பயன்படுத்தி இதைச் செய்யலாம். getElementById ”,” getElementsByClassName ”,” querySelector ', அல்லது ' querySelectorAll ”.
'கிளிக்()' முறையின் சிறந்த விளக்கத்திற்கு ஒரு உதாரணத்தைப் பார்ப்போம்.
எடுத்துக்காட்டு: HTML தேர்வுப்பெட்டி மற்றும் ரேடியோ பட்டன் கூறுகள்
ஒரு உதாரணம் கருதப்படுகிறது இதில் ' கிளிக்() ” முறை HTML தேர்வுப்பெட்டி மற்றும் ரேடியோ பொத்தான் கூறுகளுடன் பயன்படுத்தப்படுகிறது. கீழே உள்ள குறியீட்டைப் பின்பற்றவும்:
< வடிவம் >
< உள்ளீடு
வகை = 'செக்பாக்ஸ்'
ஐடி = 'செக்பாக்ஸ்1'
ஓவர் மீது = 'செக்பாக்ஸிற்கு()'
>
Linuxhint மூலம் இயக்கப்படுகிறது
< உள்ளீடு
வகை = 'வானொலி'
ஐடி = 'ரேடியோ பட்டன்'
ஓவர் மீது = 'வானொலிக்கு()'
>
Linuxhint மூலம் இயக்கப்படுகிறது
< / வடிவம் >
மேலே உள்ள குறியீடு துணுக்கில்:
- முதலில், என்ற குறிச்சொல்லைப் பயன்படுத்தி வலைப்பக்கத்தில் ஒரு தேர்வுப்பெட்டி உருவாக்கப்படும். தேர்வுப்பெட்டி ”.
- அதன் பிறகு, நிகழ்ச்சி கேட்பவர் “ ஓவர் மீது ' தேர்வுப்பெட்டியுடன் இணைக்கப்பட்டுள்ளது மற்றும் ' செக்பாக்ஸ்() ” செயல்பாடு.
- அதே வழியில், ' வானொலி '' பொத்தானைப் பயன்படுத்தி உருவாக்கப்பட்டது <உள்ளீடு> ” குறிச்சொல் மற்றும் நிகழ்வு கேட்பவர் அதனுடன் இணைக்கப்பட்டுள்ளார். ஆனால் இந்த முறை, ' வானொலிக்கு() ” செயல்பாடு செயல்படுத்தப்படுகிறது.
வலைப்பக்கத்தில் HTML உறுப்பை உருவாக்கிய பிறகு, இப்போது ' கிளிக்() ”முறை:
< கையால் எழுதப்பட்ட தாள் >
செக்பாக்ஸிற்கான செயல்பாடு ( ) {
document.getElementById ( 'செக்பாக்ஸ்1' ) .கிளிக் செய்யவும் ( ) ;
}
வானொலிக்கான செயல்பாடு ( ) {
document.getElementById ( 'ரேடியோ பட்டன்' ) .கிளிக் செய்யவும் ( ) ;
}
< / கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- முதலில், இரண்டு ஜாவாஸ்கிரிப்ட் செயல்பாடுகளை வரையறுக்கவும், ' செக்பாக்ஸ்() 'மற்றும்' வானொலிக்கு() ”.
- இந்த செயல்பாடுகள் ' document.getElementById() 'செக்பாக்ஸ்1' மற்றும் 'ரேடியோ பட்டன்' என்ற குறிப்பிட்ட ஐடிகளுடன் பக்கத்தில் உள்ள HTML உறுப்புகளுக்கான குறிப்புகளைப் பெறுவதற்கான முறை.
- HTML உறுப்பு மீது கிளிக் செய்வதன் உருவகப்படுத்துதலுக்கு, கிளிக்() முறை பயன்படுத்தப்படுகிறது. இது அழைக்கப்படும் போது இந்த செயல்பாடு ஆன் அல்லது ஆஃப் நிலையை மாற்றுகிறது.
மேலே உள்ள குறியீடு துணுக்குகளைச் செயல்படுத்திய பிறகு, வெளியீடு இப்படித் தோன்றும்:
'கிளிக்()' முறையைப் பயன்படுத்தி தேர்வுப்பெட்டியின் நிலை மற்றும் ரேடியோ பொத்தானின் நிலை மாறுகிறது என்பதை மேலே உள்ள gif விளக்குகிறது.
முடிவுரை
ஜாவாஸ்கிரிப்ட் மூலம் இணையப் பக்கத்துடன் பயனர் தொடர்புகளைக் கையாள கிளிக்() முறை மிகவும் பயனுள்ளதாக இருக்கும்.
உறுப்பை உடல் ரீதியாக கிளிக் செய்ய பயனரை நம்புவதற்கு பதிலாக, கிளிக் நிகழ்வை நிரல் ரீதியாக உருவகப்படுத்த கிளிக்() முறையைப் பயன்படுத்தவும். ஊடாடும் மற்றும் பயனர் நட்பு வடிவமைப்புகளை உருவாக்க இது பயனுள்ளதாக இருக்கும். இந்தக் கட்டுரை HTML இல் DOM உறுப்பு “கிளிக்()” முறையின் அர்த்தத்தை வெற்றிகரமாக நிரூபித்துள்ளது.