DOM' టోకెన్ జాబితా ” తుది వినియోగదారు వారి అవసరాలకు అనుగుణంగా యాక్సెస్ చేయగల చాలా లక్షణాలు లేదా పద్ధతులను కలిగి ఉంది. ఈ జాబితా అందించిన లక్షణాలు మరియు పద్ధతులు అందించిన డేటా సెట్‌లపై నిర్దిష్ట కార్యకలాపాలను నిర్వహిస్తాయి మరియు తదనుగుణంగా ఫలితాన్ని అందిస్తాయి. ఇది శ్రేణి లాగా ఉంటుంది, ఎందుకంటే ఇది వివిధ సభ్యులను కలిగి ఉంటుంది, ఇది వారి సూచిక ద్వారా ఎంచుకోబడుతుంది మరియు శ్రేణి వలె మొదటి సూచిక ' 0 ”. కానీ మీరు ఇలాంటి పద్ధతులను ఉపయోగించలేరు ' పాప్()', 'పుష్()' లేదా 'చేరండి() ”.
ఈ బ్లాగ్ జావాస్క్రిప్ట్ ద్వారా HTML DOMTokenList ఆబ్జెక్ట్‌ల పనిని వివరిస్తుంది.
జావాస్క్రిప్ట్ HTML DOMTokenList ఆబ్జెక్ట్‌లతో ఎలా పని చేయాలి?
HTML DOMTokenList స్వతహాగా ఏమీ లేదు మరియు దాని విలువ దానిలో ఉన్న లక్షణాలు మరియు పద్ధతుల కారణంగా ఉంటుంది. సరైన అమలుతో పాటు ఈ లక్షణాలు మరియు పద్ధతులను వివరంగా సందర్శిద్దాం.
విధానం 1: యాడ్() పద్ధతి
ది ' జోడించు ()” ఎంచుకున్న మూలకంతో కొత్త తరగతులు, లక్షణాలు లేదా సాధారణ టోకెన్‌లను జోడించడం లేదా కేటాయించడం. దీని వాక్యనిర్మాణం క్రింద పేర్కొనబడింది:
htmlElement. జోడించు ( oneOrMoreToken )
దీని అమలు క్రింది కోడ్ ద్వారా నిర్వహించబడుతుంది:
< తల >
< శైలి >
.ఫాంట్ పరిమాణం{
ఫాంట్ పరిమాణం: పెద్ద;
}
.color{
నేపథ్య రంగు: క్యాడెట్బ్లూ;
రంగు: తెల్లటి పొగ;
}
< / శైలి >
< / తల >
< శరీరం >
< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linux < / h1 >
< బటన్ క్లిక్ చేయండి = 'చర్య()' > యాడర్ < / బటన్ >
< p > స్టైలింగ్‌ని వర్తింపజేయడానికి పై బటన్‌ను నొక్కండి < / p >
< div id = 'ఎంచుకున్న' >
< p > నేను ఎంచుకున్న వచనం. < / p >
< / div >
< స్క్రిప్ట్ >
ఫంక్షన్ చర్య() {
document.getElementById('సెలెక్టెడ్').classList.add('fontSize', 'color');
}
< / స్క్రిప్ట్ >
< / శరీరం >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ముందుగా, రెండు CSS తరగతులను ఎంచుకోండి ' ఫాంట్ పరిమాణం ” మరియు “రంగు” మరియు వాటికి “వంటి యాదృచ్ఛిక CSS లక్షణాలను కేటాయించండి ఫాంట్ పరిమాణం', 'నేపథ్యం-రంగు' మరియు 'రంగు ”.
- తరువాత, “<ని ఉపయోగించి బటన్లను సృష్టించండి బటన్ >' ట్యాగ్ 'ని పిలుస్తుంది చర్య ()' ఫంక్షన్ 'ని ఉపయోగించి క్లిక్ చేయండి ” ఈవెంట్ శ్రోత.
- అదనంగా, తల్లిదండ్రులను సృష్టించండి ' div 'మూలకం మరియు దానికి' యొక్క ఐడిని కేటాయించండి ఎంపిక చేయబడింది ” మరియు దాని లోపల డమ్మీ డేటాను చొప్పించండి.
- ఆ తరువాత, నిర్వచించండి ' చర్య ()” ఫంక్షన్ చేసి, ఎంచుకున్న మూలకం యొక్క ప్రత్యేక ఐడిని యాక్సెస్ చేయడం ద్వారా దాని సూచనను నిల్వ చేయండి.
- చివరగా, 'ని ఉపయోగించండి తరగతి జాబితా 'తరగతులు కేటాయించడానికి మరియు అటాచ్ చేయడానికి ఆస్తి' జోడించు ()' పద్ధతి. అప్పుడు, ఈ పద్ధతి కుండలీకరణం లోపల CSS తరగతులను పాస్ చేయండి మరియు ఇది ఎంచుకున్న మూలకానికి ఈ తరగతులను వర్తింపజేస్తుంది.
పై కోడ్ సంకలనం తర్వాత అవుట్‌పుట్ ఇలా ఉత్పత్తి చేయబడుతుంది:
పై gif CSS తరగతులు ఎంపిక చేయబడిన మూలకానికి ' జోడించు ()' పద్ధతి.
విధానం 2: తొలగించు() పద్ధతి
ఈ పద్ధతి క్రింది కోడ్‌లో చేసినట్లుగా ఒకటి లేదా అంతకంటే ఎక్కువ ఎంచుకున్న మూలకాల నుండి నిర్దిష్ట తరగతి లేదా ఐడిని తొలగిస్తుంది:
< తల >< శైలి >
.ఫాంట్ పరిమాణం {
ఫాంట్- పరిమాణం : పెద్ద;
}
. రంగు {
నేపథ్య- రంగు : కాడెట్బ్లూ;
రంగు : తెల్లటి పొగ;
}
< / శైలి >
< / తల >
< శరీరం >
< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linuxhint < / h1 >
< బటన్ క్లిక్ చేయండి = 'చర్య()' >జోడించేవాడు< / బటన్ >
< p >స్టైలింగ్‌ని వర్తింపజేయడానికి పై బటన్‌ను నొక్కండి< / p >
< div id = 'ఎంచుకున్న' తరగతి = 'ఫాంట్ సైజు రంగు' >
< p > నేను ఎంపిక చేయబడింది వచనం .< / p >
< / div >
< స్క్రిప్ట్ >
ఫంక్షన్ చర్య ( ) {
document.getElementById ( 'ఎంచుకున్న' ) .classList.తీసివేయండి ( 'రంగు' ) ;
}
< / స్క్రిప్ట్ >
< / శరీరం >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ప్రారంభంలో, పై కోడ్‌లో వివరించిన కోడ్ ఇక్కడ ఉదాహరణగా ఉపయోగించబడుతుంది.
- ఇక్కడ, రెండూ ' రంగు 'మరియు' ఫాంట్ పరిమాణం ” తరగతులు నేరుగా ఎంచుకున్న మూలకానికి కేటాయించబడతాయి.
- ఆ తరువాత, లోపల ' చర్య ()' ఫంక్షన్ ఇది ' ద్వారా ప్రారంభించబడింది క్లిక్ చేయండి 'ఈవెంట్ వినేవాడు' తొలగించు ()” టోకెన్ పద్ధతి ఉపయోగించబడుతుంది.
- ఈ పద్ధతి ఎంచుకున్న మూలకం నుండి తీసివేయబడే ఒకటి లేదా బహుళ తరగతులను తీసుకుంటుంది. మా విషయంలో, ' రంగు ' ఎంచుకున్న HTML మూలకం నుండి తరగతి తీసివేయబడుతుంది.
పై కోడ్ యొక్క అవుట్‌పుట్ ఇలా ప్రదర్శించబడుతుంది:
'తొలగించు()' పద్ధతిని ఉపయోగించి ఎంచుకున్న మూలకం నుండి నిర్దిష్ట CSS తరగతి తీసివేయబడిందని పై అవుట్‌పుట్ చూపిస్తుంది.
విధానం 3: టోగుల్() పద్ధతి
ది ' టోగుల్ ()' పద్ధతి అనేది రెండింటి కలయిక ' జోడించు ()' మరియు ' తొలగించు ()' పద్ధతులు. ఇది మొదట అందించిన CSS తరగతిని ఎంచుకున్న HTML మూలకానికి కేటాయించి, ఆపై వినియోగదారు చర్యలకు అనుగుణంగా తీసివేస్తుంది.
< html >< తల >
< శైలి >
.ఫాంట్ పరిమాణం {
ఫాంట్- పరిమాణం : xx-పెద్ద;
}
. రంగు {
నేపథ్య- రంగు : కాడెట్బ్లూ;
రంగు : తెల్లటి పొగ;
}
< / శైలి >
< / తల >
< శరీరం >
< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linuxhint < / h1 >
< బటన్ క్లిక్ చేయండి = 'చర్య()' >జోడించేవాడు< / బటన్ >
< p >స్టైలింగ్‌ని వర్తింపజేయడానికి పై బటన్‌ను నొక్కండి< / p >
< div id = 'ఎంచుకున్న' >
< p > నేను ఎంపిక చేయబడింది వచనం .< / p >
< / div >
< స్క్రిప్ట్ >
ఫంక్షన్ చర్య ( ) {
document.getElementById ( 'ఎంచుకున్న' ) .classList.toggle ( 'ఫాంట్ పరిమాణం' ) ;
}
< / స్క్రిప్ట్ >
< / శరీరం >
< / html >
పై కోడ్ యొక్క వివరణ క్రింద పేర్కొనబడింది:
- పై విభాగంలో ఉపయోగించిన అదే ప్రోగ్రామ్ ఉపయోగించబడుతుంది, కేవలం ' టోగుల్ ()' పద్ధతి 'తో భర్తీ చేయబడింది తొలగించు ()' పద్ధతి.
సంకలన దశ ముగింపులో, అవుట్‌పుట్ క్రింది విధంగా ఉంటుంది:
వినియోగదారు చర్యకు అనుగుణంగా నిర్దిష్ట CSS తరగతి జోడించబడుతుందని మరియు తీసివేయబడుతుందని అవుట్‌పుట్ చూపిస్తుంది.
విధానం 4: కలిగి() పద్ధతి
ది ' కలిగి ఉంటుంది ()” పద్ధతి HTML మూలకంపై నిర్దిష్ట CSS తరగతుల లభ్యతను తనిఖీ చేయడానికి ఉపయోగించబడుతుంది మరియు దాని అమలు క్రింద పేర్కొనబడింది:
< స్క్రిప్ట్ >ఫంక్షన్ చర్య ( ) {
xని అనుమతించండి = పత్రం. getElementById ( 'ఎంచుకున్న' ) . తరగతి జాబితా . కలిగి ఉంటుంది ( 'ఫాంట్ పరిమాణం' ) ;
పత్రం. getElementById ( 'పరీక్ష' ) . అంతర్గత HTML = x ;
}
స్క్రిప్ట్ >
HTML మరియు CSS భాగం అలాగే ఉంటుంది. కేవలం “< స్క్రిప్ట్ >' ట్యాగ్, 'కంటెయిన్స్()' పద్ధతిని ఎంచుకున్న ఎలిమెంట్‌పై వర్తింపజేసి, ' ఫాంట్ పరిమాణం ” అనేది ఆ మూలకానికి వర్తింపజేయబడిందో లేదో. అప్పుడు, ఫలితం id 'ని కలిగి ఉన్న HTML మూలకంపై వెబ్‌పేజీలో ప్రదర్శించబడుతుంది. పరీక్ష ”.
పై కోడ్‌ని సంకలనం చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
అవుట్‌పుట్ ' యొక్క విలువను చూపుతుంది నిజం ” తిరిగి ఇవ్వబడింది అంటే నిర్దిష్ట CSS తరగతి ఎంచుకున్న HTML మూలకంపై వర్తించబడుతుంది.
విధానం 5: అంశం() పద్ధతి
ది ' అంశం ()” పద్ధతి టోకెన్ లేదా CSS తరగతిని వారి ఇండెక్స్ నంబర్‌కు అనుగుణంగా ఎంచుకుంటుంది, ఇది “ నుండి ప్రారంభమవుతుంది. 0 ', క్రింద చూపిన విధంగా:
< శరీరం >< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linux h1 >
< బటన్ క్లిక్ చేయండి = 'చర్య()' > చెకర్ బటన్ >
< p > CSS తరగతి ఇది మొదట కేటాయించబడుతుంది , తిరిగి పొందుతుంది : p >
< h3 id = 'యూజ్కేస్' తరగతి = 'firstCls secondCls thirdCls' > h3 >
< స్క్రిప్ట్ >
ఫంక్షన్ చర్య ( ) {
డెమోలిస్ట్ చేయనివ్వండి = పత్రం. getElementById ( 'యూజ్కేస్' ) . తరగతి జాబితా . అంశం ( 0 ) ;
పత్రం. getElementById ( 'యూజ్కేస్' ) . అంతర్గత HTML = డెమోలిస్ట్ ;
}
స్క్రిప్ట్ >
శరీరం >
పై కోడ్ యొక్క వివరణ:
- ముందుగా, మేము ఎంచుకున్న ఎలిమెంట్‌కు బహుళ CSS తరగతులు “ అనే idతో కేటాయించబడతాయి. యూజ్కేస్ ” మరియు “చర్య()” పద్ధతి ద్వారా ప్రారంభించబడుతుంది క్లిక్ చేయండి ” ఈవెంట్.
- ఈ ఫంక్షన్‌లో, ' అంశం ()'' యొక్క సూచికతో పద్ధతి 0 ” ఎంచుకున్న మూలకానికి జోడించబడుతుంది. ఫలితం వేరియబుల్‌లో నిల్వ చేయబడుతుంది ' డెమోలిస్ట్ ' ఇది ' ఉపయోగించి వెబ్‌పేజీలో ముద్రించబడుతుంది అంతర్గత HTML ”ఆస్తి.
సంకలనం ముగిసిన తర్వాత, అవుట్‌పుట్ ఇలా వస్తుంది:
అవుట్‌పుట్ CSS తరగతి పేరును చూపుతుంది, ఇది ఎంచుకున్న మూలకంపై మొదట వర్తించబడుతుంది మరియు తిరిగి పొందబడుతుంది.
విధానం 6: పొడవు ఆస్తి
ది ' పొడవు ”టోకెన్‌లిస్ట్ యొక్క ఆస్తి ఎంచుకున్న మూలకంపై వర్తించే మూలకాల సంఖ్య లేదా కేటాయించిన తరగతులను అందిస్తుంది. అమలు ప్రక్రియ క్రింద పేర్కొనబడింది:
< స్క్రిప్ట్ >ఫంక్షన్ చర్య ( ) {
వాటిని పడగొట్టనివ్వండి = పత్రం. getElementById ( 'యూజ్కేస్' ) . తరగతి జాబితా . పొడవు ;
పత్రం. getElementById ( 'యూజ్కేస్' ) . అంతర్గత HTML = పడగొట్టు ;
}
స్క్రిప్ట్ >
పై కోడ్ బ్లాక్‌లో:
- మొదట ' పొడవు 'ఆస్తి జోడించబడింది' తరగతి జాబితా ” ఎంచుకున్న మూలకంపై కేటాయించబడిన తరగతుల సంఖ్యను తిరిగి పొందేందుకు ఆస్తి.
- తరువాత, ఆస్తి యొక్క ఫలితం వేరియబుల్‌లో నిల్వ చేయబడుతుంది ' పడగొట్టు ' ఇది ' అనే idతో ఒక మూలకంపై వెబ్‌పేజీలో ప్రదర్శించబడుతుంది యూజ్కేస్ ”.
- మిగిలిన కోడ్ పైన పేర్కొన్న విభాగంలో వలెనే ఉంటుంది.
సంకలనం తర్వాత ఉత్పత్తి చేయబడిన అవుట్‌పుట్ క్రింద పేర్కొనబడింది:
అవుట్‌పుట్ మూలకంపై అనువర్తిత తరగతులను అందిస్తుంది.
విధానం 7: రీప్లేస్() పద్ధతి
ది ' భర్తీ చేయండి ()” పద్ధతి అనేది కనీసం రెండు పారామితులను తీసుకుంటుంది మరియు దిగువ చూపిన విధంగా ఎంచుకున్న మూలకం కోసం మొదటి పరామితిని రెండవ పరామితితో భర్తీ చేస్తుంది:
< స్క్రిప్ట్ >ఫంక్షన్ చర్య ( ) {
డెమోలిస్ట్ చేయనివ్వండి = పత్రం. getElementById ( 'యూజ్కేస్' ) . తరగతి జాబితా . భర్తీ చేయండి ( 'ఫాంట్ పరిమాణం' , 'రంగు' ) ;
}
స్క్రిప్ట్ >
ఇక్కడ, CSS ' ఫాంట్ పరిమాణం 'తరగతి CSSతో భర్తీ చేయబడింది' రంగు 'ఐడితో మూలకం కోసం తరగతి' యూజ్కేస్ ”. మిగిలిన HTML మరియు CSS కోడ్ పైన పేర్కొన్న విభాగాలలో వలెనే ఉంటుంది.
సవరించిన తర్వాత ' స్క్రిప్ట్ ” భాగం మరియు ప్రధాన HTML ఫైల్‌ను కంపైల్ చేయడం, అవుట్‌పుట్ ఇలా కనిపిస్తుంది:
నిర్దిష్ట CSS తరగతి మరొక తరగతితో భర్తీ చేయబడిందని అవుట్‌పుట్ చూపిస్తుంది.
విధానం 8: విలువ ఆస్తి
ది ' విలువ ”టోకెన్ జాబితా ప్రాపర్టీ ఎంచుకున్న HTML మూలకానికి కేటాయించిన అవసరమైన విలువలను తిరిగి పొందుతుంది. ఇది పక్కన జోడించబడినప్పుడు ' తరగతి జాబితా ” ఆస్తి, ఎంచుకున్న మూలకాలకు కేటాయించిన తరగతులు క్రింద ప్రదర్శించబడినట్లుగా తిరిగి పొందబడతాయి:
< స్క్రిప్ట్ >ఫంక్షన్ చర్య ( ) {
demoValని అనుమతించండి = పత్రం. getElementById ( 'యూజ్కేస్' ) . తరగతి జాబితా . విలువ ;
పత్రం. getElementById ( 'ముద్రణ' ) . అంతర్గత HTML = డెమోవాల్ ;
}
స్క్రిప్ట్ >
పైన పేర్కొన్న కోడ్ స్నిప్పెట్ యొక్క వివరణ:
- లోపల ' చర్య ()' ఫంక్షన్ బాడీ, ' విలువ 'ఆస్తి పక్కన జతచేయబడింది' తరగతి జాబితా ” ఎంచుకున్న HTML మూలకాల యొక్క అన్ని కేటాయించబడిన తరగతులను తిరిగి పొందేందుకు ఆస్తి.
- తరువాత, పై ఆస్తి యొక్క ఫలితం వేరియబుల్‌లో నిల్వ చేయబడుతుంది “ డెమోవాల్ ” మరియు “ప్రింట్” ఐడిని కలిగి ఉన్న మూలకంపై చొప్పించబడింది.
సంకలన దశ ముగిసిన తర్వాత, వెబ్‌పేజీలో అవుట్‌పుట్ క్రింది విధంగా ఉత్పత్తి చేయబడుతుంది:
ఎంచుకున్న మూలకంపై వర్తించే CSS తరగతుల పేరును అవుట్‌పుట్ చూపుతుంది.
ముగింపు
HTML DOM టోకెన్‌లిస్ట్ ఆబ్జెక్ట్ అందించిన HTML మూలకంపై నిర్దిష్ట కార్యాచరణను వర్తింపజేయడానికి ఉపయోగించే బహుళ పద్ధతులు మరియు లక్షణాలను నిల్వ చేసే శ్రేణి లాంటిది. టోకెన్‌లిస్ట్ అందించిన కొన్ని ముఖ్యమైన మరియు విస్తృతంగా ఉపయోగించే పద్ధతులు ' add()”, “తొలగించు()”, “టోగుల్()”, “contains()”, “item()”, మరియు “replace() ”. టోకెన్‌లిస్ట్ ద్వారా అందించబడిన లక్షణాలు ' పొడవు 'మరియు' విలువ ”. ఈ కథనం JavaScript HTML DOMTokenList ఆబ్జెక్ట్‌తో పని చేసే విధానాన్ని వివరించింది.