LWC – QuerySelector()

QuerySelector()

அடிப்படையில், querySelector() என்பது 'this.template' உடன் பயன்படுத்தப்படுகிறது, இது ஒரு குறிப்பிட்ட டெம்ப்ளேட்டில் இருக்கும் உறுப்புகளைப் பெறுகிறது. பல கூறுகள் இருந்தால், அது முதல் உறுப்பை மட்டுமே கருத்தில் கொள்ளும். குறிப்பிட்ட உறுப்பு டெம்ப்ளேட்டில் இல்லை என்றால், பூஜ்யம் வழங்கப்படும். இது தேர்வாளரை ஒரு அளவுருவாக எடுத்துக்கொள்கிறது. இது வர்க்கப்பெயர் குறிச்சொல்லாக இருக்கலாம். ஐடி ஆதரிக்கப்படாது. சில சமயங்களில், நீங்கள் ஒரே வகுப்புகளைக் கொண்டிருக்கிறீர்கள் ஆனால் வெவ்வேறு மதிப்புகளைக் கொண்டிருக்கிறீர்கள். இந்தச் சூழ்நிலையில், மதிப்பின் அடிப்படையில் உறுப்புகளைப் பெறும் தரவு-ரீசிடை நாம் பயன்படுத்த வேண்டும்.

தொடரியல்:

querySelector() க்குள் தேர்வியை எவ்வாறு குறிப்பிடுவது என்று பார்ப்போம்.

1. this.template.querySelector(தேர்வு)
2. this.template.querySelector(‘[data-recid=”value”]’)

எடுத்துக்காட்டாக: தேர்வாளர் h1 குறிச்சொல்லாக இருந்தால், அதை 'h1' எனக் குறிப்பிட வேண்டும்.

1. அனைத்து எடுத்துக்காட்டுகளும் இந்த 'meta.xml' கோப்பைப் பயன்படுத்துகின்றன. ஒவ்வொரு உதாரணத்திலும் இதை நாங்கள் குறிப்பிட மாட்டோம். LWC கூறுகளை உங்கள் பதிவுப் பக்கம், பயன்பாட்டுப் பக்கம் அல்லது முகப்புப் பக்கத்தில் சேர்க்கலாம்.

2. இந்த வழிகாட்டியில் நாம் விவாதிக்கப் போகும் அனைத்து எடுத்துக்காட்டுகளிலும், தர்க்கம் 'js' குறியீடாக வழங்கப்படுகிறது. அதன் பிறகு, முழு 'js' குறியீட்டையும் உள்ளடக்கிய ஸ்கிரீன்ஷாட்டை நாங்கள் குறிப்பிடுகிறோம்.

எடுத்துக்காட்டு 1:

முதலில், HTML கோப்பில் சில உரையுடன் h1, div, span மற்றும் மின்னல்-பொத்தான் குறிச்சொற்களை உருவாக்குகிறோம். மேலும், கிளிக் செய்யும் போது முந்தைய கூறுகளைப் பெறும் ஒரு பொத்தானை உருவாக்குகிறோம். “js” கோப்பில், இந்த நான்கு உறுப்புகளின் உள்உரையை this.template.querySelector() மூலம் வழங்குகிறோம்.

firstExample.html

firstExample.js

முழு குறியீடு:

வெளியீடு:

எந்தவொரு பொருளின் 'பதிவு' பக்கத்தில் இந்தக் கூறுகளைச் சேர்க்கவும் (நாங்கள் அதை கணக்குப் பதிவுப் பக்கத்தில் சேர்த்துள்ளோம்). இந்த சாளரத்தை ஆய்வு செய்து, 'கன்சோல்' தாவலுக்குச் செல்லவும்.

இப்போது, ​​'விவரங்களைப் பெறு' பொத்தானைக் கிளிக் செய்யவும். அதன் பிறகு, அனைத்து உறுப்புகளுக்கும் உள் உரை கன்சோலில் காட்டப்படுவதைக் காண்பீர்கள்.

எடுத்துக்காட்டு 2:

எடுத்துக்காட்டு 1 இல் விவாதிக்கப்பட்ட கூறுகளைப் பயன்படுத்தவும். HTML கூறுகளில் 'h1' குறிச்சொல்லுடன் இரண்டு கூறுகளைக் குறிப்பிடவும் மற்றும் 'h1' இன் உள் உரையைப் பெற 'js' கோப்பில் உள்ள querySelector() ஐப் பயன்படுத்தவும்.

firstExample.html

firstExample.js

முழு குறியீடு:

வெளியீடு:

ஒரே குறிச்சொல்லுடன் இரண்டு கூறுகள் உள்ளன. எனவே, querySelector() முதல் உறுப்பை மட்டும் தேர்ந்தெடுக்கிறது. 'விவரங்களைப் பெறு' பொத்தானைக் கிளிக் செய்யும் போது, ​​நீங்கள் முதல் 'h1' ஐக் காண்பீர்கள் மற்றும் உள் உரை கன்சோலில் திரும்பும்.

எடுத்துக்காட்டு 3:

querySelector() ஐ ஒரு மாறியில் சேமித்து, உள் உரையைப் பெற இந்த மாறியைப் பயன்படுத்தலாம். சில உரையுடன் ஒரு ஸ்பான் டேக்கை உருவாக்கி, இதை மாறியில் சேமிப்பதன் மூலம் உள்உரையை கன்சோலில் திருப்பி விடலாம்.

firstExample.html

firstExample.js

முழு குறியீடு:

வெளியீடு:

எடுத்துக்காட்டு 4:

இந்த எடுத்துக்காட்டில், ஒரு பொத்தான் மற்றும் உள்ளீடு உரையை (மின்னல்-உள்ளீடு) உருவாக்குகிறோம், அது விஷயத்தை சரமாக எடுக்கும். querySelector() முறைக்கு தேர்வாளராக 'மின்னல்-உள்ளீடு' ஐ அனுப்புகிறோம். இது “computer_related’ மாறிக்கு ஒதுக்கப்பட்டுள்ளது. இந்த பொத்தானின் கிளிக்கில், இந்த மாறியில் இருக்கும் மதிப்பு காட்டப்படும்.

secondExample.html

secondExample.js

முழு குறியீடு:

வெளியீடு:

எடுத்துக்காட்டு 5:

இங்கே, டேட்டா-ரீசிட் பயன்படுத்துகிறோம். HTML கோப்பில் 'Span1', 'Span2' மற்றும் 'Span3' என மூன்று இடைவெளி குறிச்சொற்கள் கொண்ட பட்டனை உருவாக்குவோம். querySelector() இல் உள்ள டேட்டா-ரீசிட்க்கு “Span1” ஐ அனுப்புவதன் மூலம் முதல் இடைவெளியைத் தேர்ந்தெடுக்கவும்.

thirdExample.html

மூன்றாவது எடுத்துக்காட்டு.js

முழு குறியீடு:

வெளியீடு:

முடிவுரை

DOM உறுப்புகளை அணுக querySelector() ஐ எவ்வாறு பயன்படுத்துவது என்பதை நாங்கள் கற்றுக்கொண்டோம். தற்போதைய டெம்ப்ளேட்டில் உள்ள உறுப்புகளைத் தேர்ந்தெடுக்க querySelector() 'this.template' ஐப் பயன்படுத்தியது. இதை ஒரு மாறியில் சேமிக்கலாம் அல்லது நேரடியாகப் பயன்படுத்தலாம். இவை இரண்டும் உதாரணங்களுடன் குறிப்பிடப்பட்டுள்ளன. மேலும், பல கூறுகளை உள்ளடக்கிய ஒரு உதாரணத்தை நாங்கள் வழங்கியுள்ளோம். இந்த வழக்கில், querySelector() முதல் உறுப்பை வழங்கும்.