ఈ ట్యుటోరియల్ ఏదైనా అట్రిబ్యూట్ విలువ ఆధారంగా DOM మూలకాన్ని కనుగొనే విధానాన్ని వివరిస్తుంది.
అట్రిబ్యూట్ విలువ ఆధారంగా DOMలో ఒక మూలకాన్ని ఎలా కనుగొనాలి/తీర్చుకోవాలి?
అట్రిబ్యూట్ విలువ ఆధారంగా DOMలో మూలకాన్ని కనుగొనడానికి, 'ని ఉపయోగించండి క్వెరీ సెలెక్టర్() ” పద్ధతి. ఇది ఇచ్చిన CSS సెలెక్టర్ విలువకు సరిపోలే డాక్యుమెంట్‌లో కనుగొనబడిన మొదటి మూలకాన్ని ఇస్తుంది.
గమనిక : పేర్కొన్న సెలెక్టర్ విలువకు సరిపోలే అన్ని మూలకాలను పొందడానికి, 'ని ఉపయోగించండి querySelectorAll() ” పద్ధతి.
వాక్యనిర్మాణం
“querySelector()” పద్ధతిని ఉపయోగించడం కోసం, కింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:
పత్రం. querySelector ( సెలెక్టర్ ) ;
ఇక్కడ, సెలెక్టర్ ఒక id లేదా క్లాస్ ' #id ',' .తరగతి ”:
అట్రిబ్యూట్ విలువ ఆధారంగా మూలకాన్ని కనుగొనడానికి మీరు ఇచ్చిన సింటాక్స్‌ని కూడా ఉపయోగించవచ్చు:
పత్రం. querySelector ( '[సెలెక్టర్='విలువ']' ) ;
పై వాక్యనిర్మాణంలో, “ సెలెక్టర్ ' ఉంటుంది ' id 'లేదా' తరగతి ', లేదా ' విలువ ' ఉంటుంది ' idName 'లేదా' తరగతి పేరు ”.
ఉదాహరణ
HTML ఫైల్‌లో, h4 ఎలిమెంట్‌ని ఉపయోగించి హెడ్డింగ్, ట్యాగ్‌ని ఉపయోగించి సాదా వచనం మరియు కేటాయించిన ఐడితో సందేశం కోసం డివిని కలిగి ఉండే డివి ఎలిమెంట్‌ను సృష్టించండి. సందేశం ”:
< div id = 'డివి' శైలి = 'టెక్స్ట్-అలైన్:సెంటర్;' >< h4 తరగతి = 'సెకను' id = 'శీర్షిక' > ఒక కనుగొనండి మూలకం DOMలో ఒక ఆధారంగా గుణం విలువ h4 >
< span id = 'స్వాగతం' > Linuxhint కు స్వాగతం వ్యవధి >
< div id = 'సందేశం' >
< p id = 'సందేశము' > హలో మిత్రులారా ! Linuxhint JavaScript ట్యుటోరియల్స్‌కు స్వాగతం p >
div >
div >
పేజీ క్రింది విధంగా కనిపిస్తుంది:
ఇప్పుడు, id ' అనే మూలకాన్ని పొందుతాము సందేశం ''ని ఉపయోగించి కేటాయించబడింది క్వెరీ సెలెక్టర్() 'పద్ధతి:
ప్రతి మూలకం = పత్రం. querySelector ( '#సందేశం' )చివరగా, కన్సోల్‌లో మూలకాన్ని ప్రింట్ చేయండి:
కన్సోల్. లాగ్ ( మూలకం ) ;అవుట్‌పుట్‌లో, ' div 'మూలకం దాని కేటాయించిన ఐడితో చూపబడింది' సందేశం ”, ఇది అవసరమైన మూలకం విజయవంతంగా తిరిగి పొందబడిందని సూచిస్తుంది:
మీరు ఇచ్చిన సింటాక్స్‌ని ఉపయోగించి మూలకాన్ని కూడా పొందవచ్చు. ఇక్కడ, మేము id అనే మూలకాన్ని పొందుతాము ' సందేశం ”:
ప్రతి మూలకం = పత్రం. querySelector ( '[id='msg']' ) ;అవుట్‌పుట్
ఇప్పుడు, 'ని ఉపయోగించి దాని రంగును నవీకరించండి శైలి 'ఆస్తి:
మూలకం. శైలి . రంగు = 'నీలం' ;మీరు చూడగలిగినట్లుగా, వచనం ''లో ఉంది. ఆకుపచ్చ 'రంగు, మరియు ఇప్పుడు అది నవీకరించబడింది' నీలం ”:
అట్రిబ్యూట్ విలువ ఆధారంగా DOMలో మూలకాన్ని కనుగొనడం గురించి అంతే.
ముగింపు
అట్రిబ్యూట్ విలువ ఆధారంగా DOMలో మూలకాన్ని కనుగొనడానికి, 'ని ఉపయోగించండి క్వెరీ సెలెక్టర్() ” పత్రంలో పేర్కొన్న CSS సెలెక్టర్ విలువకు సరిపోలే మొదటి మూలకాన్ని అందించే పద్ధతి. అంతేకాకుండా, పేర్కొన్న సెలెక్టర్ విలువకు సరిపోలే అన్ని మూలకాలను పొందడానికి, 'ని ఉపయోగించండి querySelectorAll() ” పద్ధతి. ఈ ట్యుటోరియల్ ఏదైనా అట్రిబ్యూట్ విలువ ఆధారంగా DOM మూలకాన్ని కనుగొనే విధానాన్ని వివరించింది.