క్వెరీ సెలెక్టర్()
ప్రాథమికంగా, querySelector() ఒక నిర్దిష్ట టెంప్లేట్‌లో ఉన్న మూలకాలను పొందే “this.template”తో ఉపయోగించబడుతుంది. బహుళ మూలకాలు ఉంటే, అది మొదటి మూలకాన్ని మాత్రమే పరిగణనలోకి తీసుకుంటుంది. టెంప్లేట్‌లో పేర్కొన్న మూలకం ఉనికిలో లేకుంటే శూన్యం తిరిగి ఇవ్వబడుతుంది. ఇది సెలెక్టర్‌ను పారామీటర్‌గా తీసుకుంటుంది. ఇది తరగతి పేరు ట్యాగ్ కావచ్చు. IDకి మద్దతు ఉండదు. కొన్ని సందర్భాల్లో, మీరు ఒకే తరగతులను కలిగి ఉంటారు కానీ విభిన్న విలువలను కలిగి ఉంటారు. ఈ దృష్టాంతంలో, విలువ ఆధారంగా మూలకాలను పొందే డేటా-రెసిడ్‌ని మనం ఉపయోగించాలి.
సింటాక్స్:
querySelector() లోపల సెలెక్టర్‌ని ఎలా పేర్కొనాలో చూద్దాం.
- this.template.querySelector(సెలెక్టర్)
- this.template.querySelector(‘[data-recid=”value”]’)
ఉదాహరణకు: సెలెక్టర్ h1 ట్యాగ్ అయితే, మీరు దానిని 'h1'గా పేర్కొనాలి.
1. అన్ని ఉదాహరణలు ఈ 'meta.xml' ఫైల్‌ను ఉపయోగించుకుంటాయి. మేము ప్రతి ఉదాహరణలో దీనిని పేర్కొనము. LWC భాగాలు మీ రికార్డ్ పేజీ, యాప్ పేజీ లేదా హోమ్ పేజీకి జోడించబడతాయి.
'1.0' ?>
<లక్ష్యాలు>
2. ఈ గైడ్‌లో మనం చర్చించబోయే అన్ని ఉదాహరణలలో, లాజిక్ “js” కోడ్‌గా అందించబడింది. ఆ తర్వాత, మేము మొత్తం “js” కోడ్‌ని కలిగి ఉన్న స్క్రీన్‌షాట్‌ను నిర్దేశిస్తాము.
ఉదాహరణ 1:
ముందుగా, మేము HTML ఫైల్‌లో కొంత వచనంతో h1, div, span మరియు మెరుపు-బటన్ ట్యాగ్‌లను సృష్టిస్తాము. అలాగే, మేము క్లిక్ చేసినప్పుడు మునుపటి మూలకాలను పొందే బటన్‌ను సృష్టిస్తాము. “js” ఫైల్‌లో, మేము ఈ నాలుగు మూలకాల యొక్క అంతర్గత వచనాన్ని this.template.querySelector() ద్వారా తిరిగి ఇస్తాము.
firstExample.html
<టెంప్లేట్><మెరుపు-కార్డు వేరియంట్ = 'ఇరుకైన' శీర్షిక = 'హలో' చిహ్నం- పేరు = 'ప్రామాణికం:ఖాతా' >
< h1 > హలో LinuxHint. నేను h1లో ఉన్నాను < / h1 >
< div > హలో LinuxHint. నేను డివిలో ఉన్నాను < / div >
< వ్యవధి > హలో LinuxHint. నేను స్పాన్‌లో ఉన్నాను < / వ్యవధి >
<మెరుపు-ఇన్పుట్ రకం = 'వచనం' రూపాంతరం = 'ప్రామాణిక' పేరు = 'పేరు' లేబుల్ = 'టెక్స్ట్ ఇన్పుట్' >
హలో LinuxHint. నేను మెరుపు ఇన్‌పుట్‌లో ఉన్నాను < / lightning-input>
<మెరుపు-బటన్ వేరియంట్ = 'బేస్' లేబుల్ = 'వివరాలు పొందండి' క్లిక్ చేయండి = { వివరాలు పొందండి } >< / lightning-button>
< / lightning-card>
< / టెంప్లేట్>
firstExample.js
వివరాలు పొందండి ( ) {// h1 ట్యాగ్ యొక్క అంతర్గత వచనాన్ని పొందండి.
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( 'h1' ) . అంతర్గత వచనం ) ;
// div ట్యాగ్ యొక్క అంతర్గత వచనాన్ని పొందండి.
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( 'div' ) . అంతర్గత వచనం ) ;
// స్పాన్ ట్యాగ్ యొక్క అంతర్గత వచనాన్ని పొందండి.
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( 'వ్యవధి' ) . అంతర్గత వచనం ) ;
// మెరుపు-ఇన్పుట్ యొక్క అంతర్గత వచనాన్ని పొందండి.
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( 'మెరుపు ఇన్పుట్' ) . అంతర్గత వచనం ) ;
}
మొత్తం కోడ్:
అవుట్‌పుట్:
ఏదైనా వస్తువు యొక్క 'రికార్డ్' పేజీకి ఈ భాగాన్ని జోడించండి (మేము దానిని ఖాతా రికార్డ్ పేజీకి జోడించాము). ఈ విండోను తనిఖీ చేసి, 'కన్సోల్' ట్యాబ్‌కు వెళ్లండి.
ఇప్పుడు, 'వివరాలను పొందండి' బటన్ క్లిక్ చేయండి. ఆ తర్వాత, అన్ని మూలకాల కోసం కన్సోల్‌లో అంతర్గత టెక్స్ట్ ప్రదర్శించబడుతుందని మీరు చూస్తారు.
ఉదాహరణ 2:
ఉదాహరణ 1లో చర్చించబడిన కాంపోనెంట్‌ని ఉపయోగించండి. HTML కాంపోనెంట్‌లో “h1” ట్యాగ్‌తో రెండు ఎలిమెంట్‌లను పేర్కొనండి మరియు “h1” యొక్క అంతర్గత వచనాన్ని పొందడానికి “js” ఫైల్‌లోని querySelector()ని ఉపయోగించండి.
firstExample.html
<టెంప్లేట్><మెరుపు-కార్డు వేరియంట్ = 'ఇరుకైన' శీర్షిక = 'హలో' చిహ్నం- పేరు = 'ప్రామాణికం:ఖాతా' >
< h1 > హలో LinuxHint. నేను మొదటి h1ని < / h1 >
< h1 > హలో LinuxHint. నేను రెండవ h1 < / h1 >
<మెరుపు-బటన్ వేరియంట్ = 'బేస్' లేబుల్ = 'వివరాలు పొందండి' క్లిక్ చేయండి = { వివరాలు పొందండి } >< / lightning-button>
< / lightning-card>
< / టెంప్లేట్>
firstExample.js
వివరాలు పొందండి ( ) {// h1 ట్యాగ్ యొక్క అంతర్గత వచనాన్ని పొందండి.
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( 'h1' ) . అంతర్గత వచనం ) ;
}
మొత్తం కోడ్:
అవుట్‌పుట్:
ఒకే ట్యాగ్‌తో రెండు అంశాలు ఉన్నాయి. కాబట్టి, querySelector() మొదటి మూలకాన్ని మాత్రమే ఎంచుకుంటుంది. మీరు 'వివరాలను పొందండి' బటన్‌ను క్లిక్ చేసినప్పుడు, మీరు మొదటి 'h1'ని చూస్తారు మరియు కన్సోల్‌లో అంతర్గత వచనం తిరిగి వస్తుంది.
ఉదాహరణ 3:
మేము querySelector()ని వేరియబుల్‌లో కూడా నిల్వ చేయవచ్చు మరియు ఈ వేరియబుల్‌ని ఉపయోగించి ఇన్నర్‌టెక్స్ట్‌ని పొందవచ్చు. కొంత టెక్స్ట్‌తో స్పాన్ ట్యాగ్‌ని క్రియేట్ చేద్దాం మరియు దీన్ని వేరియబుల్‌లో నిల్వ చేయడం ద్వారా కన్సోల్‌లో ఇన్నర్‌టెక్స్ట్‌ని తిరిగి అందిద్దాం.
firstExample.html
<టెంప్లేట్><మెరుపు-కార్డు వేరియంట్ = 'ఇరుకైన' శీర్షిక = 'హలో' చిహ్నం- పేరు = 'ప్రామాణికం:ఖాతా' >
< వ్యవధి > హలో LinuxHint. నేను స్పాన్ < / వ్యవధి >< br >
<మెరుపు-బటన్ వేరియంట్ = 'బేస్' లేబుల్ = 'వివరాలు పొందండి' క్లిక్ చేయండి = { వివరాలు పొందండి } >< / lightning-button>
< / lightning-card>
< / టెంప్లేట్>
firstExample.js
వివరాలు పొందండి ( ) {// స్పాన్ ట్యాగ్ యొక్క అంతర్గత వచనాన్ని పొందండి.
అతనికి వీలు = ఇది . టెంప్లేట్ . querySelector ( 'వ్యవధి' ) . అంతర్గత వచనం
కన్సోల్. లాగ్ ( అతను ) ;
}
మొత్తం కోడ్:
అవుట్‌పుట్:
ఉదాహరణ 4:
ఈ ఉదాహరణలో, మేము సబ్జెక్ట్‌ను స్ట్రింగ్‌గా తీసుకునే బటన్ మరియు ఇన్పుట్ టెక్స్ట్ (మెరుపు-ఇన్పుట్)ని సృష్టిస్తాము. మేము querySelector() పద్ధతికి సెలెక్టర్‌గా 'మెరుపు-ఇన్పుట్'ని పాస్ చేస్తాము. ఇది “computer_related’ వేరియబుల్‌కు కేటాయించబడింది. ఈ బటన్ యొక్క క్లిక్‌లో, ఈ వేరియబుల్‌లో ఉన్న విలువ ప్రదర్శించబడుతుంది.
secondExample.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'విషయం' >
< కేంద్రం >
<మెరుపు-ఇన్పుట్ లేబుల్ = 'విషయాన్ని నమోదు చేయండి' విలువ = { కంప్యూటర్_సంబంధిత } >< / lightning-input>
< p > మీ విషయం: < బి > {computer_related} < / బి > < / p >
< / కేంద్రం >
<మెరుపు బటన్ లేబుల్ = 'ఇక్కడ ఎంచుకోండి' క్లిక్ చేయండి = { హ్యాండిల్ సబ్జెక్ట్ } >< / lightning-button>
< / lightning-card>
< / టెంప్లేట్>
secondExample.js
కంప్యూటర్_సంబంధితహ్యాండిల్ సబ్జెక్ట్ ( సంఘటన ) {
ఇది . కంప్యూటర్_సంబంధిత = ఇది . టెంప్లేట్ . querySelector ( 'మెరుపు ఇన్పుట్' ) . విలువ ;
}
మొత్తం కోడ్:
అవుట్‌పుట్:
ఉదాహరణ 5:
ఇక్కడ, మేము డేటా-రెసిడ్‌ని ఉపయోగిస్తాము. HTML ఫైల్‌లో 'Span1', 'Span2' మరియు 'Span3'గా రెసిడ్‌తో మూడు స్పాన్ ట్యాగ్‌లతో బటన్‌ను క్రియేట్ చేద్దాం. క్వెరీసెలెక్టర్()లోని డేటా-రెసిడ్‌కు 'Span1'ని పాస్ చేయడం ద్వారా మొదటి స్పాన్‌ని ఎంచుకోండి.
మూడవ ఉదాహరణ.html
<టెంప్లేట్><మెరుపు కార్డు శీర్షిక = 'డేటా-ఐడి ఆధారంగా గుర్తించడం' >
< వ్యవధి డేటా-recid = 'Span1' > నేను స్పాన్-1లో ఉన్నాను < / వ్యవధి >< br >
< వ్యవధి డేటా-recid = 'Span2' > నేను span-2లో ఉన్నాను < / వ్యవధి >< br >
< వ్యవధి డేటా-recid = 'Span3' > నేను span-3లో ఉన్నాను < / వ్యవధి >< br >
<మెరుపు-బటన్ వేరియంట్ = 'బేస్' లేబుల్ = 'వివరాలు పొందండి' క్లిక్ చేయండి = { వివరాలు పొందండి } >< / lightning-button>
< / lightning-card>
< / టెంప్లేట్>
మూడవ ఉదాహరణ.js
వివరాలు పొందండి ( ) {// Span1 యొక్క అంతర్గత వచనాన్ని పొందండి
కన్సోల్. లాగ్ ( ఇది . టెంప్లేట్ . querySelector ( '[data-recid='Span1']' ) . అంతర్గత వచనం ) ;
}
మొత్తం కోడ్:
అవుట్‌పుట్:
ముగింపు
DOM మూలకాలను యాక్సెస్ చేయడానికి querySelector()ని ఎలా ఉపయోగించాలో మేము నేర్చుకున్నాము. ప్రస్తుత టెంప్లేట్‌లోని మూలకాలను ఎంచుకోవడానికి querySelector() “this.template”ని ఉపయోగించింది. దీన్ని వేరియబుల్‌లో నిల్వ చేయడం లేదా నేరుగా ఉపయోగించడం సాధ్యమవుతుంది. ఈ రెండూ ఉదాహరణలతో ప్రస్తావించబడ్డాయి. అలాగే, మేము బహుళ అంశాలను కలిగి ఉన్న ఉదాహరణను అందించాము. ఈ సందర్భంలో, querySelector() మొదటి మూలకాన్ని అందిస్తుంది.