వివిధ పరిస్థితులలో, ప్రోగ్రామర్లు పేరు లక్షణం ద్వారా HTML మూలకాన్ని పొందాలి. డెవలపర్ దాని విలువను చదవడానికి లేదా మార్చడానికి రేడియో బటన్ లేదా చెక్‌బాక్స్ వంటి ఫారమ్ నియంత్రణను యాక్సెస్ చేయాలనుకుంటున్నారని అనుకుందాం. మరింత ప్రత్యేకంగా, ' పేరు ” లక్షణం సమూహ సంబంధిత ఫారమ్ నియంత్రణలకు ఉపయోగించబడుతుంది మరియు అదే పేరు అనేక నియంత్రణలకు అందించబడుతుంది, వాటిని ఒకే సమూహంగా యాక్సెస్ చేయడానికి అనుమతిస్తుంది.
ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో పేరు ద్వారా HTML మూలకాన్ని తిరిగి పొందే పద్ధతులను వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో పేరు ద్వారా మూలకాలను ఎలా పొందాలి?
జావాస్క్రిప్ట్‌లో, కింది ముందే నిర్వచించిన జావాస్క్రిప్ట్ పద్ధతుల సహాయంతో మీరు దాని పేరు లక్షణాన్ని ఉపయోగించి HTML మూలకాన్ని యాక్సెస్ చేయవచ్చు:
-
- getElementsByName() పద్ధతి
- querySelectorAll() పద్ధతి
విధానం 1: “getElementsByName()” పద్ధతిని ఉపయోగించి పేరు ద్వారా మూలకాన్ని పొందండి
HTML మూలకాన్ని పేరుతో పొందడానికి, “ని ఉపయోగించండి getElementsByName() ” పద్ధతి. ఈ పద్ధతి పేర్కొన్న పేరు లక్షణాన్ని కలిగి ఉన్న మూలకాల సేకరణను అందిస్తుంది.
వాక్యనిర్మాణం
getElementsByName() పద్ధతి కోసం క్రింది సింటాక్స్ ఉపయోగించబడుతుంది:
document.getElementsByName ( 'పేరు' )
ఉదాహరణ
మొదట, ఆరు బటన్లను సృష్టించండి. వారిలో ఐదుగురికి ' పేరు 'HTML మూలకాన్ని పొందడానికి ఉపయోగించే లక్షణం' బటన్ ”. '' అని పిలిచే ఆరవ బటన్‌తో ఆన్‌క్లిక్ ఈవెంట్‌ను అటాచ్ చేయండి అప్లైస్టైల్() ఐదు బటన్లను స్టైల్ చేయడానికి ఫంక్షన్:
< బటన్ పేరు = 'btn' > బటన్ బటన్ >< బటన్ పేరు = 'btn' > బటన్ బటన్ >
< బటన్ పేరు = 'btn' > బటన్ బటన్ >
< బటన్ పేరు = 'btn' > బటన్ బటన్ >
< బటన్ పేరు = 'btn' > బటన్ బటన్ > < br >< br >
< బటన్ onclick = '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 >
< బటన్ onclick = 'applyStyle()' > ఇక్కడ నొక్కండి బటన్ >
div >
నిర్వచించిన ఫంక్షన్‌లో, మేము ముందుగా '' పేరుతో ఉన్న అన్ని బటన్ ఎలిమెంట్‌లను యాక్సెస్ చేస్తాము. btn1 ” ఆపై దానిపై స్టైలింగ్ వర్తించండి:
const btns = document.querySelectorAll ( '[]' ) ;
ప్రతి కోసం btns ( btn = > {
btn.style.background = 'కాడెట్ బ్లూ' ;
} ) ;
}
ఇచ్చిన అవుట్‌పుట్ కేవలం రెండు బటన్‌లు మాత్రమే వాటి నేపథ్య రంగును మార్చుకున్నాయని సూచిస్తుంది, దీని పేరు “btn1”:
గమనిక: మీరు ఒకే మూలకాన్ని పొందాలనుకుంటే, document.querySelectorAllకి బదులుగా document.querySelectorని ఉపయోగించమని సిఫార్సు చేయబడింది.
ముగింపు
పేరు ద్వారా మూలకాన్ని పొందడానికి లేదా తిరిగి పొందడానికి, 'ని ఉపయోగించండి getElementsByName() ' లేదా ' querySelectorAll() ” పద్ధతులు. పేరు ద్వారా మూలకాన్ని పొందడానికి అత్యంత సాధారణంగా మరియు సమర్ధవంతంగా ఉపయోగించే పద్ధతి “getElementsByName()” పద్ధతి. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో పేరు ద్వారా HTML మూలకాన్ని తిరిగి పొందే పద్ధతులను వివరించింది.