జావాస్క్రిప్ట్‌లో, ' querySelectorAll() ” పద్ధతి నిర్దిష్ట CSS సెలెక్టర్‌లతో సరిగ్గా సరిపోలే మొదటి మూలకాన్ని తిరిగి పొందుతుంది. ఈ పనిని నిర్వహించడానికి ఈ పద్ధతి DOM ట్రీని దాటడం ప్రారంభిస్తుంది. మూలకం కనుగొనబడిన తర్వాత, ఇది ప్రత్యేక విధులను నిర్వహించడానికి స్క్రిప్ట్ విభాగంలో నిర్వచించిన JavaScript అంతర్నిర్మిత లక్షణాలు లేదా పద్ధతులను వర్తింపజేస్తుంది. ఈ పద్ధతి సాధారణంగా అవసరాలకు అనుగుణంగా లక్ష్య అంశాలను ఎంచుకోవడానికి ఉపయోగించబడుతుంది. ఇది పేర్కొన్న సెలెక్టర్‌కు సరిపోయే అన్ని ఎలిమెంట్లను ఎంచుకోవడానికి లేదా ఇచ్చిన ఇండెక్స్‌లో ఉంచబడిన నిర్దిష్ట వాటిని ఎంచుకోవడానికి వినియోగదారులను అనుమతిస్తుంది.
ఈ గైడ్ జావాస్క్రిప్ట్‌లో “querySelectorAll()” పద్ధతిని ఉపయోగించడాన్ని వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో “querySelectorAll()” పద్ధతిని ఎలా ఉపయోగించాలి?
ఉపయోగించడానికి ' querySelectorAll() ” పద్ధతి, CSS ఎంపిక సాధనాన్ని దాని వాదనగా పేర్కొనండి. CSS సెలెక్టర్లలో 'రకం, తరగతి మరియు ఐడి' ఉన్నాయి. CSS సెలెక్టర్ చెల్లనిది అయితే, అది సింటాక్స్ లోపాన్ని అందిస్తుంది, లేకుంటే, అది స్టాటిక్ నోడ్‌లిస్ట్ ఆబ్జెక్ట్‌ను దాని ప్రామాణిక అవుట్‌పుట్‌గా అందిస్తుంది.
వాక్యనిర్మాణం
document.querySelectorAll ( CSS సెలెక్టర్లు )
పై వాక్యనిర్మాణంలో, “ CSS సెలెక్టర్లు ”అన్ని చెల్లుబాటు అయ్యే CSS సెలెక్టర్‌లను చూడండి.
పైన నిర్వచించిన సింటాక్స్‌ని ఆచరణాత్మకంగా ఉపయోగిస్తాము.
HTML కోడ్
ఇచ్చిన HTML కోడ్ యొక్క అవలోకనం:
< h2 తరగతి = 'డెమో' > మొదటి శీర్షిక h2 >< h3 తరగతి = 'డెమో' > రెండవ శీర్షిక h3 >
< p తరగతి = 'డెమో' > మొదటి పేరా p >
< p తరగతి = 'డెమో' > రెండవ పేరా p >
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > ఇక్కడ నొక్కండి ! బటన్ >
పై కోడ్ లైన్లలో:
- ది ' ” ట్యాగ్ “డెమో” తరగతిని కలిగి ఉన్న ఉపశీర్షికను జోడిస్తుంది.
- ది ' 'డెమో' అనే అదే తరగతితో రెండవ ఉపశీర్షికను 'ట్యాగ్ నిర్వచిస్తుంది.
- ది ' ” ట్యాగ్‌లు ఒకే తరగతిని కలిగి ఉన్న పేరా స్టేట్‌మెంట్‌లను పొందుపరుస్తాయి అంటే “డెమో”.
- ది ' <బటన్> 'jsFunc()' ఫంక్షన్‌ని అమలు చేయడానికి 'ఆన్‌క్లిక్' మౌస్ ఈవెంట్‌తో 'ట్యాగ్ కొత్త బటన్‌ను కలిగి ఉంటుంది.
గమనిక: ఈ గైడ్ అంతటా నిర్దిష్ట HTML కోడ్ అనుసరించబడుతుంది.
ఉదాహరణ 1: “querySelectorAll()” పద్ధతిని వర్తింపజేయడం ద్వారా ఒకే తరగతి ఉన్న ఎలిమెంట్స్‌ని ఎంచుకుని వాటి రంగులను మార్చడం
ఈ ఉదాహరణ 'డెమో' క్లాస్‌ని ఉపయోగించే అన్ని ఎలిమెంట్లను ఎంచుకోవడానికి 'querySelectorAll()' పద్ధతిని ఉపయోగిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
దిగువ పేర్కొన్న కోడ్‌ను పర్యావలోకనం చేద్దాం:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
const list = document.querySelectorAll ( '.డెమో' ) ;
కోసం ( వీలు నేను = 0 ; i < జాబితా.పొడవు; i++ ) {
జాబితా [ i ] .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 కోడ్‌ను చూడండి:
< p id = 'కోసం' > p >
పైన పేర్కొన్న HTML కోడ్‌లో, “ఉదాహరణ 1” HTML కోడ్ చివరిలో “పారా” అనే idతో ఖాళీ పేరాని జోడించండి.
జావాస్క్రిప్ట్ కోడ్
ఇప్పుడు, జావాస్క్రిప్ట్ కోడ్‌తో కొనసాగండి:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'కోసం' ) .innerHTML = nodelist.length;
}
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్ ప్రకారం:
- “jsFunc()” ఫంక్షన్ మొదట “
” మూలకాలను “ని ఉపయోగించి ఎంపిక చేస్తుంది querySelectorAll() ” పద్ధతి.
- ఆ తరువాత, ' getElementById() ”మెథడ్ జోడించిన ఖాళీ పేరాగ్రాఫ్‌ని దాని ఐడి “పారా” ద్వారా యాక్సెస్ చేస్తుంది, దానిని వర్తింపజేసిన “పొడవు” ప్రాపర్టీ యొక్క రిటర్న్ విలువతో జత చేస్తుంది.
అవుట్‌పుట్
చూసినట్లుగా, పైన పేర్కొన్న అవుట్‌పుట్ పేర్కొన్న CSS క్లాస్ సెలెక్టర్ “డెమో”కి సరిపోలే మొత్తం “4” ఎలిమెంట్లను చూపుతుంది.
ముగింపు
ది ' querySelectorAll() ” CSS సెలెక్టర్‌ని దాని విలువగా పేర్కొనడం ద్వారా పద్ధతిని సులభంగా ఉపయోగించవచ్చు. ఈ పద్ధతి ప్రతి HTML మూలకంతో సరిపోలుతుంది మరియు పేర్కొన్న సెలెక్టర్‌తో సరిపోలే వాటిని ఎంచుకుంటుంది. ఎలిమెంట్లను ఎంచుకున్న తర్వాత, స్క్రిప్ట్ విభాగంలో నిర్వచించిన వాటిపై అవసరమైన పనిని ఇది నిర్వహిస్తుంది. జావాస్క్రిప్ట్‌లో “querySelectorAll()” పద్ధతిని ఉపయోగించడాన్ని ఈ గైడ్ క్లుప్తంగా వివరించింది.