ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోవడానికి వివిధ పద్ధతులను ప్రదర్శిస్తుంది.
జావాస్క్రిప్ట్‌లో DOM ఎలిమెంట్‌లను ఎంచుకోవడానికి వివిధ మార్గాలు ఏమిటి?
జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోవడానికి క్రింది పద్ధతులను ఉపయోగించండి:
- getElementById() పద్ధతి
- getElementsByClassName() పద్ధతి
- getElementsByTagName() పద్ధతి
- querySelector() పద్ధతి
- querySelectorAll() పద్ధతి
విధానం 1: “getElementById()” పద్ధతిని ఉపయోగించి DOM మూలకాలను ఎంచుకోండి
DOM మూలకాలను ఎంచుకోవడానికి 'ని ఉపయోగించండి getElementById() మూలకం యొక్క కేటాయించిన id ఆధారంగా పద్ధతి. ఈ పద్ధతి దాని ప్రత్యేకత ద్వారా ఒకే మూలకాన్ని ఎంచుకుంటుంది ' id ' గుణం. ఇది పేర్కొన్న idతో మూలకానికి సూచనను ఇస్తుంది మరియు తిరిగి ఇస్తుంది “ శూన్య ” సరిపోలే మూలకం కనుగొనబడకపోతే.
వాక్యనిర్మాణం
getElementById() పద్ధతి కోసం దిగువ ఇవ్వబడిన సింటాక్స్‌ని ఉపయోగించండి:
పత్రం. getElementById ( 'idName' )
ఇక్కడ, ' idName ” అనేది ఒక మూలకానికి కేటాయించబడిన id లక్షణం పేరు.
ఉదాహరణ
HTML ఫైల్‌లో, “ని ఉపయోగించి ఒక div మూలకంలో రెండు హెడ్డింగ్‌లను సృష్టించండి h4 ” ట్యాగ్. div మూలకానికి idలను కేటాయించండి మరియు 'h4' మూలకాలకు ' అనే శీర్షికలు div 'మరియు' శీర్షిక ”, వరుసగా. మధ్యలో సమలేఖనం చేయడానికి div మూలకానికి శైలి లక్షణాన్ని జోడించండి. అలాగే, ఒక తరగతిని కేటాయించండి ' విభాగం ” దాని రంగును మార్చే రెండవ శీర్షికకు:
< div id = 'డివి' శైలి = 'టెక్స్ట్-అలైన్:సెంటర్;' >< h4 id = 'శీర్షిక' > విభిన్న పద్ధతులను ఉపయోగించి DOM మూలకాలను యాక్సెస్ చేయండి < / h4 >
< h4 తరగతి = 'విభాగం' id = 'శీర్షిక' > 'getElementById()' పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోండి
< / h4 >
< / div >
ఇప్పుడు, మేము పొందుతాము ' div ” మూలకం దాని సహాయంతో కేటాయించిన idని ఉపయోగిస్తుంది getElementById() 'పద్ధతి:
ఉంది getById = పత్రం. getElementById ( 'డివి' ) ;ఐడికి వ్యతిరేకంగా మూలకాన్ని ప్రింట్ చేయండి ' div ” కన్సోల్‌లో:
కన్సోల్. లాగ్ ( getById ) ;అవసరమైన HTML మూలకం విజయవంతంగా తిరిగి పొందబడిందని చూడవచ్చు:
విధానం 2: “getElementsByClassName()” పద్ధతిని ఉపయోగించి DOM మూలకాలను ఎంచుకోండి
'' సహాయంతో మీరు కేటాయించిన తరగతిని ఉపయోగించి DOM మూలకాన్ని కూడా ఎంచుకోవచ్చు getElementsByClassName() ” పద్ధతి. ఇది వాటి తరగతి పేరుతో మూలకాల జాబితాను ఎంచుకుంటుంది. ఇది లైవ్ HTMLకలెక్షన్ ఆబ్జెక్ట్‌ను అవుట్‌పుట్ చేస్తుంది, పేర్కొన్న తరగతి పేరుతో అన్ని ఎలిమెంట్‌లను కలిగి ఉండే అర్రే లాంటి వస్తువు.
వాక్యనిర్మాణం
కింది వాక్యనిర్మాణం “getElementsByClassName()” పద్ధతి కోసం ఉపయోగించబడుతుంది:
పత్రం. getElementsByClassName ( 'తరగతి పేరు' )ఉదాహరణ
ఇక్కడ, మేము తరగతిని కలిగి ఉన్న మూలకాన్ని పొందుతాము ' విభాగం ” మరియు కన్సోల్‌లో ముద్రించండి:
ఉంది getByClass = పత్రం. getElementsByClassName ( 'విభాగం' ) ;కన్సోల్. లాగ్ ( getByClass ) ;
మీరు అవుట్‌పుట్‌లో చూడగలిగినట్లుగా, 1 పొడవు గల శ్రేణి మూలకాన్ని కలిగి ఉంటుంది ' h4 'ఎవరు తరగతికి చెందినవారు' విభాగం ”:
విధానం 3: “getElementsByTagName()” పద్ధతిని ఉపయోగించి DOM మూలకాలను ఎంచుకోండి
ఒక మూలకానికి id లేదా క్లాస్ కేటాయించబడనట్లయితే, 'ని ఉపయోగించండి getElementsByTagName() ”ఎలిమెంట్‌ను వాటి ట్యాగ్ పేరుతో పొందే పద్ధతి. ఇది లైవ్ HTMLకలెక్షన్ ఆబ్జెక్ట్‌ను కూడా అందిస్తుంది, ఇది పేర్కొన్న ట్యాగ్ పేరు ఉన్న అన్ని ఎలిమెంట్‌లను కలిగి ఉండే శ్రేణి లాంటి వస్తువు.
వాక్యనిర్మాణం
ట్యాగ్ పేరు ఆధారంగా ఎలిమెంట్‌లను ఎంచుకోవడానికి ఇచ్చిన సింటాక్స్‌ని అనుసరించండి:
getElementsByTagName ( ట్యాగ్ పేరు )ఉదాహరణ
ట్యాగ్ పేరును పాస్ చేయడం ద్వారా “getElementsByTagName()” పద్ధతిని ప్రారంభించండి h4 ”. ఆపై, కన్సోల్‌లో పేర్కొన్న ట్యాగ్ పేరుకు సరిపోలే మూలకాల జాబితాను ప్రింట్ చేయండి:
ఉంది getByTag = పత్రం. getElementsByTagName ( 'h4' ) ;కన్సోల్. లాగ్ ( getByTag ) ;
అవుట్‌పుట్
విధానం 4: “querySelector()” పద్ధతిని ఉపయోగించి DOM మూలకాలను ఎంచుకోండి
ఉపయోగించడానికి ' క్వెరీ సెలెక్టర్() ”DOM మూలకాన్ని పొందడానికి పద్ధతి. ఇది పేర్కొన్న CSS సెలెక్టర్‌తో సరిపోలే ఒకే మూలకాన్ని ఎంచుకుంటుంది. ఇది పత్రంలో కనుగొనబడిన మొదటి సరిపోలే మూలకాన్ని అందిస్తుంది. ఏ మూలకం సరిపోలకపోతే, అది ' శూన్య ”.
వాక్యనిర్మాణం
దిగువ పేర్కొన్న వాక్యనిర్మాణం “querySelector()” పద్ధతి కోసం ఉపయోగించబడుతుంది:
పత్రం. querySelector ( గుణం )ఇక్కడ, లక్షణం ఒక id లేదా క్లాస్ వంటి CSS సెలెక్టర్. #నా ఐడి ”” .నా తరగతి '.
ఉదాహరణ
“querySelector()” పద్ధతికి కాల్ చేసి, idని పాస్ చేయండి “ #శీర్షిక ” ఒకే ఐడిని కలిగి ఉన్న మూలకాలను పొందడానికి:
ఉంది getByquery = పత్రం. querySelector ( '#శీర్షిక' ) ;కన్సోల్. లాగ్ ( getByquery ) ;
ఇది మొదటి సరిపోలిన మూలకాన్ని అవుట్‌పుట్‌గా ఇస్తుంది:
విధానం 5: “querySelectorAll()” పద్ధతిని ఉపయోగించి DOM మూలకాలను ఎంచుకోండి
మీరు పేర్కొన్న లక్షణాన్ని (id లేదా క్లాస్) కలిగి ఉన్న అన్ని అంశాలను ఎంచుకోవాలనుకుంటే, “ని ఉపయోగించండి querySelectorAll() ” పద్ధతి. ఇది నిర్దిష్ట నిర్వచించిన CSS సెలెక్టర్‌కు సరిపోలే మూలకాల జాబితాను ఎంచుకుంటుంది. ఇది నిర్దిష్ట CSS సెలెక్టర్‌తో సరిపోలిన డాక్యుమెంట్‌లోని అన్ని ఎలిమెంట్‌లను కలిగి ఉండే నోడ్‌లిస్ట్ ఆబ్జెక్ట్‌ను ఇస్తుంది.
వాక్యనిర్మాణం
మూలకాల జాబితాను పొందడానికి క్రింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:
పత్రం. querySelectorAll ( గుణం )ఉదాహరణ
ఐడిని కలిగి ఉన్న సరిపోలిన మూలకం యొక్క జాబితాను పొందడానికి ' శీర్షిక 'తో' querySelectorAll() ” పద్ధతి మరియు కన్సోల్‌లోని మూలకాలపై ముద్రించండి:
ఉంది getByqueryAll = పత్రం. querySelectorAll ( '#శీర్షిక' ) ;కన్సోల్. లాగ్ ( getByqueryAll ) ;
అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోవడం గురించి అంతే.
ముగింపు
జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోవడానికి, “ని ఉపయోగించండి getElementById() ',' getElementsByClassName() ',' getElementsByTagName() ',' క్వెరీ సెలెక్టర్() ', లేదా ' querySelectorAll() ” పద్ధతి. ఈ పద్ధతులు వాటి ప్రత్యేక ఐడెంటిఫైయర్‌లు, క్లాస్ పేర్లు, ట్యాగ్ పేర్లు లేదా CSS సెలెక్టర్‌ల ఆధారంగా DOM నుండి ఎలిమెంట్‌లను ఎంచుకోవడానికి వివిధ మార్గాలను అందిస్తాయి. ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌లో DOM మూలకాలను ఎంచుకోవడానికి వివిధ పద్ధతులను ప్రదర్శించింది.