ஜாவாஸ்கிரிப்ட்டில், ' querySelectorAll() ” முறையானது குறிப்பிட்ட CSS தேர்வாளர்களுடன் சரியாகப் பொருந்திய முதல் உறுப்பை மீட்டெடுக்கிறது. இந்தப் பணியைச் செய்ய இந்த முறை DOM மரத்தைக் கடக்கத் தொடங்குகிறது. உறுப்பு கண்டுபிடிக்கப்பட்டதும், சிறப்புப் பணிகளைச் செய்ய ஸ்கிரிப்ட் பிரிவில் வரையறுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் உள்ளமைக்கப்பட்ட பண்புகள் அல்லது முறைகளைப் பயன்படுத்துகிறது. தேவைக்கேற்ப இலக்கு கூறுகளைத் தேர்ந்தெடுக்க இந்த முறை பொதுவாகப் பயன்படுத்தப்படுகிறது. குறிப்பிட்ட தேர்வாளருடன் பொருந்தக்கூடிய அனைத்து உறுப்புகளையும் அல்லது கொடுக்கப்பட்ட குறியீட்டில் வைக்கப்பட்டுள்ள குறிப்பிட்ட ஒன்றையும் தேர்ந்தெடுக்க பயனர்களை இது அனுமதிக்கிறது.
இந்த வழிகாட்டி ஜாவாஸ்கிரிப்டில் “querySelectorAll()” முறையைப் பயன்படுத்துவதை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் 'querySelectorAll()' முறையை எவ்வாறு பயன்படுத்துவது?
பயன்படுத்த ' querySelectorAll() ” முறை, CSS தேர்வியை அதன் வாதமாக குறிப்பிடவும். CSS தேர்வாளர்களில் 'வகை, வகுப்பு மற்றும் ஐடி' ஆகியவை அடங்கும். CSS தேர்வி தவறானதாக இருந்தால், அது தொடரியல் பிழையை வழங்கும், இல்லையெனில், நிலையான நோட்லிஸ்ட் பொருளை அதன் நிலையான வெளியீட்டாக வழங்கும்.
தொடரியல்
document.querySelectorAll ( CSS தேர்வாளர்கள் )
மேலே உள்ள தொடரியல், ' CSS தேர்வாளர்கள் ” அனைத்து செல்லுபடியாகும் CSS தேர்வாளர்களையும் பார்க்கவும்.
மேலே வரையறுக்கப்பட்ட தொடரியல் நடைமுறையில் பயன்படுத்துவோம்.
HTML குறியீடு
கொடுக்கப்பட்ட HTML குறியீட்டின் மேலோட்டம்:
< h2 வர்க்கம் = 'டெமோ' > முதல் தலைப்பு h2 >< h3 வர்க்கம் = 'டெமோ' > இரண்டாவது தலைப்பு h3 >
< ப வர்க்கம் = 'டெமோ' > முதல் பத்தி ப >
< ப வர்க்கம் = 'டெமோ' > இரண்டாவது பத்தி ப >
< பொத்தானை கிளிக் செய்யவும் = 'jsFunc()' > இங்கே கிளிக் செய்யவும் ! பொத்தானை >
மேலே உள்ள குறியீட்டு வரிகளில்:
- ' 'குறிச்சொல் 'டெமோ' வகுப்பைக் கொண்ட ஒரு துணைத் தலைப்பைச் சேர்க்கிறது.
- ' 'டெமோ' என்ற அதே வகுப்பைக் கொண்ட இரண்டாவது துணைத் தலைப்பை 'குறிச்சொல் வரையறுக்கிறது.
- ' ” குறிச்சொற்கள் ஒரே வகுப்பைக் கொண்ட பத்தி அறிக்கைகளை உட்பொதிக்கின்றன, அதாவது “டெமோ”.
- ' <பொத்தான்> 'jsFunc()' செயல்பாட்டைச் செயல்படுத்த, 'onclick' மவுஸ் நிகழ்வைக் கொண்ட ஒரு புதிய பொத்தானை 'டேக் கொண்டுள்ளது.
குறிப்பு: இந்த வழிகாட்டி முழுவதும் குறிப்பிட்ட HTML குறியீடு பின்பற்றப்படுகிறது.
எடுத்துக்காட்டு 1: 'querySelectorAll()' முறையைப் பயன்படுத்துவதன் மூலம் ஒரே வகுப்பைக் கொண்ட கூறுகளைத் தேர்ந்தெடுத்து அவற்றின் நிறங்களை மாற்றவும்
இந்த எடுத்துக்காட்டு 'டெமோ' வகுப்பைப் பயன்படுத்தும் அனைத்து கூறுகளையும் தேர்ந்தெடுக்க 'querySelectorAll()' முறையைப் பயன்படுத்துகிறது.
ஜாவாஸ்கிரிப்ட் குறியீடு
கீழே குறிப்பிடப்பட்டுள்ள குறியீட்டை மேலோட்டமாகப் பார்ப்போம்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு jsFunc ( ) {
const list = document.querySelectorAll ( '.டெமோ' ) ;
க்கான ( அனுமதிக்க நான் = 0 ; நான் < பட்டியல்.நீளம்; நான்++ ) {
பட்டியல் [ நான் ] .style.color = 'ஆரஞ்சர்' ;
}
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு வரிகளில்:
- ' jsFunc() ” செயல்பாடு வரையறுக்கப்பட்டுள்ளது.
- அதன் வரையறையில், 'பட்டியல்' மாறியானது ' querySelectorAll() 'டெமோ' வகுப்பைக் கொண்ட அனைத்து கூறுகளையும் தேர்ந்தெடுக்கும் முறை.
- அடுத்து, ' க்கான 'லூப் ஒரு முனைப் பட்டியலைத் துவக்கி, வகுப்பைக் கொண்ட அனைத்து HTML உறுப்புகளையும் சேர்த்து மீண்டும் செயல்படுத்துகிறது' டெமோ ' மற்றும் அவர்களின் உரை நிறத்தை மாற்றவும் ' நடை.நிறம் ”சொத்து.
வெளியீடு
மேலே உள்ள வெளியீட்டில், ஒரே வகுப்பின் பெயரைக் கொண்ட உறுப்புகளின் உரை நிறம், அதாவது “டெமோ” பொத்தானைக் கிளிக் செய்வதன் மூலம் மாற்றப்படுவதைக் காணலாம்.
எடுத்துக்காட்டு 2: குறிப்பிட்ட குறியீட்டு கூறுகளைத் தேர்ந்தெடுக்க “querySelectorAll()” முறையைப் பயன்படுத்துதல்
அனைத்து உறுப்புகளையும் தவிர, 'டெமோ' வகுப்பைக் கொண்ட குறிப்பிட்ட குறியீட்டு உறுப்புகளையும் பயனர் தேர்ந்தெடுக்கலாம்.
ஜாவாஸ்கிரிப்ட் குறியீடு
கொடுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
பட்டியல் [ 0 ] .style.color = 'பச்சை' ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- 'பட்டியல்' மாறியானது 'h2' உறுப்பைத் தேர்ந்தெடுக்கிறது, அதன் வகுப்பானது 'டெமோ' ஆகும். querySelectorAll() ”முறை.
- அதன் பிறகு, 'பட்டியல்' மாறியானது '0' குறியீட்டில் வைக்கப்பட்டுள்ள 'H2' உறுப்பின் உரை நிறத்தை மாற்ற 'h2' உறுப்பின் குறியீட்டைக் குறிப்பிடுகிறது.
வெளியீடு
பூஜ்ஜிய குறியீட்டில் வைக்கப்பட்டுள்ள 'H2' உறுப்பின் உரை வண்ணம் பட்டன் கிளிக் செய்வதன் மூலம் 'டெமோ' வகுப்பை மாற்றியிருப்பதை வெளியீடு காட்டுகிறது.
எடுத்துக்காட்டு 3: ஒரே வகுப்பைக் கொண்ட கூறுகளின் எண்ணிக்கையைப் பெற “querySelectorAll()” முறையைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டு 'querySelectorAll()' முறையைப் பயன்படுத்தி ஒரே வகுப்பைக் கொண்ட உறுப்புகளின் எண்ணிக்கையை மீட்டெடுக்கிறது.
HTML குறியீடு
முதலில், 'எடுத்துக்காட்டு 1' இன் மாற்றியமைக்கப்பட்ட HTML குறியீட்டைப் பாருங்கள்:
< ப ஐடி = 'அதற்காக' > ப >
மேலே கூறப்பட்ட HTML குறியீட்டில், 'எடுத்துக்காட்டு 1' HTML குறியீட்டின் முடிவில் 'பாரா' ஐடியுடன் வெற்றுப் பத்தியைச் சேர்க்கவும்.
ஜாவாஸ்கிரிப்ட் குறியீடு
இப்போது, ஜாவாஸ்கிரிப்ட் குறியீட்டைத் தொடரவும்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'அதற்காக' ) .innerHTML = nodelist.length;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கின் படி:
- 'jsFunc()' செயல்பாடு முதலில் '
' உறுப்புகளை '' ஐப் பயன்படுத்தி தேர்ந்தெடுக்கிறது querySelectorAll() ”முறை.
- அதன் பிறகு, ' getElementById() ” முறை சேர்க்கப்பட்ட வெற்றுப் பத்தியை அதன் ஐடி “பாரா” மூலம் அணுகி, பயன்படுத்தப்பட்ட “நீளம்” சொத்தின் திரும்பிய மதிப்புடன் அதைச் சேர்க்கிறது.
வெளியீடு
பார்த்தபடி, மேலே உள்ள வெளியீடு, குறிப்பிட்ட CSS கிளாஸ் செலக்டர் 'டெமோ' உடன் பொருந்தக்கூடிய மொத்த '4' உறுப்புகளைக் காட்டுகிறது.
முடிவுரை
' querySelectorAll() ” முறையை CSS தேர்வியை அதன் மதிப்பாகக் குறிப்பிடுவதன் மூலம் எளிதாகப் பயன்படுத்தலாம். இந்த முறை ஒவ்வொரு HTML உறுப்புக்கும் பொருந்துகிறது மற்றும் குறிப்பிட்ட தேர்வாளருடன் பொருந்தக்கூடியவற்றைத் தேர்ந்தெடுக்கிறது. உறுப்புகள் தேர்ந்தெடுக்கப்பட்டவுடன், ஸ்கிரிப்ட் பிரிவில் வரையறுக்கப்பட்ட தேவையான பணியை அது செய்கிறது. இந்த வழிகாட்டி ஜாவாஸ்கிரிப்டில் “querySelectorAll()” முறையைப் பயன்படுத்துவதை சுருக்கமாக விளக்குகிறது.