பல்வேறு சூழ்நிலைகளில், புரோகிராமர்கள் பெயர் பண்புக்கூறு மூலம் HTML உறுப்பைப் பெற வேண்டும். டெவலப்பர் அதன் மதிப்பைப் படிக்க அல்லது கையாள, ரேடியோ பொத்தான் அல்லது தேர்வுப்பெட்டி போன்ற படிவக் கட்டுப்பாட்டை அணுக விரும்புகிறார் என்று வைத்துக்கொள்வோம். இன்னும் குறிப்பாக, ' பெயர் ” பண்புக்கூறு தொடர்புடைய படிவக் கட்டுப்பாடுகளைக் குழுவாகப் பயன்படுத்துகிறது மற்றும் பல கட்டுப்பாடுகளுக்கு ஒரே பெயரை வழங்கலாம், அவற்றை ஒரு குழுவாக அணுக அனுமதிக்கிறது.
இந்த இடுகை ஜாவாஸ்கிரிப்டில் பெயரின் மூலம் HTML உறுப்பை மீட்டெடுப்பதற்கான முறைகளை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் பெயர் மூலம் உறுப்புகளை எவ்வாறு பெறுவது?
ஜாவாஸ்கிரிப்ட்டில், பின்வரும் முன் வரையறுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் முறைகளின் உதவியுடன் அதன் பெயர் பண்புக்கூறைப் பயன்படுத்தி HTML உறுப்பை நீங்கள் அணுகலாம்:
-
- getElementsByName() முறை
- querySelectorAll() முறை
முறை 1: “getElementsByName()” முறையைப் பயன்படுத்தி பெயரின் மூலம் உறுப்பைப் பெறுங்கள்
HTML உறுப்பை பெயரால் பெற, '' ஐப் பயன்படுத்தவும் getElementsByName() ”முறை. இந்த முறை குறிப்பிட்ட பெயர் பண்புக்கூறு கொண்ட உறுப்புகளின் தொகுப்பை வழங்குகிறது.
தொடரியல்
getElementsByName() முறைக்கு பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
document.getElementsByName ( 'பெயர்' )
உதாரணமாக
முதலில், ஆறு பொத்தான்களை உருவாக்கவும். அவர்களில் ஐந்து பேர் ' பெயர் 'HTML உறுப்பைப் பெறப் பயன்படும் பண்பு' பொத்தானை ”. '' என்று அழைக்கும் ஆறாவது பொத்தானுடன் கிளிக் நிகழ்வை இணைக்கவும் அப்ளைஸ்டைல்() ஐந்து பொத்தான்களை வடிவமைக்கும் செயல்பாடு:
< பொத்தானை பெயர் = 'btn' > பொத்தானை பொத்தானை >< பொத்தானை பெயர் = 'btn' > பொத்தானை பொத்தானை >
< பொத்தானை பெயர் = 'btn' > பொத்தானை பொத்தானை >
< பொத்தானை பெயர் = 'btn' > பொத்தானை பொத்தானை >
< பொத்தானை பெயர் = 'btn' > பொத்தானை பொத்தானை > < br >< br >
< பொத்தானை கிளிக் செய்யவும் = 'applyStyle()' > இங்கே கிளிக் செய்யவும் பொத்தானை >
ஒரு செயல்பாட்டை வரையறுக்கவும் ' அப்ளைஸ்டைல்() ” என்று பொத்தானைக் கிளிக் செய்வதன் மீது தூண்டி, அனைத்து பொத்தான்களின் பின்னணி நிறத்தையும் மாற்றும். இதைச் செய்ய, முதலில், அனைத்தையும் பெறவும் ' பொத்தானை 'கூறுகளை ஒரு குழுவாக அழைப்பதன் மூலம்' getElementsByName() ”முறை:
const btns = document.getElementsByName ( 'btn' ) ;
btns.ஒவ்வொருவருக்கும் ( btn = > {
btn.style.background = 'கேடட்ப்ளூ' ;
} ) ;
}
பொத்தானைக் கிளிக் செய்யும் போது வெளியீட்டில் நீங்கள் பார்க்க முடியும் என ஐந்து பொத்தான்களின் பின்னணி நிறம் மாற்றப்படும்:
முறை 2: “querySelectorAll()” முறையைப் பயன்படுத்தி பெயரின் மூலம் உறுப்புகளைப் பெறவும்
நீங்கள் இதையும் பயன்படுத்தலாம் ' querySelectorAll() 'உறுப்புகளைப் பெறுவதற்கான முறை' பெயர் ஜாவாஸ்கிரிப்டில் உள்ள பண்புக்கூறு. CSS வகுப்பு, ஐடி அல்லது பெயர் போன்ற குறிப்பிட்ட தேர்வாளர்/பண்புக்கு பொருந்தக்கூடிய ஆவணத்தில் உள்ள அனைத்து கூறுகளையும் மீட்டெடுக்க இந்த முறை பயன்படுத்தப்படுகிறது.
தொடரியல்
கொடுக்கப்பட்ட தொடரியல் 'உறுப்பைப் பயன்படுத்தி பெயரால் பெறுவதற்குப் பயன்படுத்தப்படுகிறது. querySelectorAll()” முறை:
document.querySelectorAll ( '[]' ) ;
உதாரணமாக
பின்வரும் எடுத்துக்காட்டில், '' என்ற பட்டன்களின் நிறத்தை மட்டும் மாற்றுவோம். btn1 ”:
< div >< பொத்தான் பெயர் = 'btn' > பொத்தானை பொத்தானை >
< பொத்தான் பெயர் = 'btn1' > பொத்தானை பொத்தானை >
< பொத்தான் பெயர் = 'btn' > பொத்தானை பொத்தானை >
< பொத்தான் பெயர் = 'btn1' > பொத்தானை பொத்தானை >
< பொத்தான் பெயர் = 'btn' > பொத்தானை பொத்தானை > < br >< br >
< பொத்தானை கிளிக் செய்யவும் = 'applyStyle()' > இங்கே கிளிக் செய்யவும் பொத்தானை >
div >
வரையறுக்கப்பட்ட செயல்பாட்டில், '' என்ற பெயரின் அனைத்து பொத்தான் கூறுகளையும் முதலில் அணுகுவோம். btn1 ” பின்னர் அதன் மீது ஸ்டைலிங் பயன்படுத்தவும்:
const btns = document.querySelectorAll ( '[]' ) ;
btns.ஒவ்வொருவருக்கும் ( btn = > {
btn.style.background = 'கேடட்ப்ளூ' ;
} ) ;
}
கொடுக்கப்பட்ட வெளியீடு இரண்டு பொத்தான்கள் மட்டுமே அவற்றின் பின்னணி நிறத்தை மாற்றியுள்ளன, அதன் பெயர் “btn1”:
குறிப்பு: நீங்கள் ஒற்றை உறுப்பைப் பெற விரும்பினால், document.querySelectorAllக்குப் பதிலாக document.querySelector ஐப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.
முடிவுரை
பெயரால் ஒரு உறுப்பைப் பெற அல்லது மீட்டெடுக்க, ' getElementsByName() 'அல்லது' querySelectorAll() ”முறைகள். உறுப்பைப் பெயரால் பெறுவதற்கு மிகவும் பொதுவாகவும் திறமையாகவும் பயன்படுத்தப்படும் முறை “getElementsByName()” முறையாகும். இந்த இடுகை ஜாவாஸ்கிரிப்டில் பெயரின் மூலம் HTML உறுப்பை மீட்டெடுப்பதற்கான முறைகளை விளக்குகிறது.