ఈ గైడ్ జావాస్క్రిప్ట్‌లో HTML DOM మూలకం “టెక్స్ట్ కంటెంట్” ప్రాపర్టీని ఎలా యాక్సెస్ చేయాలో మరియు మానిప్యులేట్ చేయాలో వివరిస్తుంది.
ముందుగా, HTML DOM “textContent” ప్రాపర్టీ యొక్క ప్రాథమిక అంశాలను పరిశీలించండి.
జావాస్క్రిప్ట్‌లో HTML DOM “టెక్స్ట్ కంటెంట్” ప్రాపర్టీ అంటే ఏమిటి?
ది ' టెక్స్ట్ కంటెంట్ ” అనేది అంతర్నిర్మిత ఆస్తి, ఇది పేర్కొన్న మూలకం లేదా నోడ్ యొక్క వచనాన్ని సెట్ చేస్తుంది, తిరిగి పొందుతుంది మరియు సవరించబడుతుంది. వారసులు , , వంటి చైల్డ్ ఎలిమెంట్‌లు మరియు ఫార్మాటింగ్ ప్రయోజనాల కోసం ఉపయోగించే మరిన్ని. “టెక్స్ట్ కంటెంట్” ప్రాపర్టీని ఉపయోగించి టెక్స్ట్‌ను సెట్ చేస్తున్నప్పుడు, టార్గెటెడ్ ఎలిమెంట్ యొక్క వారసులు పూర్తిగా కొత్త టెక్స్ట్‌తో భర్తీ చేయబడతారు.
సింటాక్స్(సెట్ టెక్స్ట్ కంటెంట్)
'ని ఉపయోగించి మూలకం/నోడ్ యొక్క వచనాన్ని సెట్ చేయడానికి ప్రాథమిక సింటాక్స్ టెక్స్ట్ కంటెంట్ 'ఆస్తి క్రింద వ్రాయబడింది:
మూలకం. టెక్స్ట్ కంటెంట్ = వచనం | నోడ్. టెక్స్ట్ కంటెంట్ = వచనం
పై వాక్యనిర్మాణం కావలసిన “ని తీసుకుంటుంది వచనం ”ఒక మూలకం లేదా నోడ్ కోసం వినియోగదారు సెట్ చేయాలనుకుంటున్న విలువగా.
సింటాక్స్(టెక్స్ట్ కంటెంట్ పొందండి)
' ద్వారా మూలకం లేదా నోడ్ యొక్క వచనాన్ని తిరిగి ఇవ్వడానికి సాధారణ వాక్యనిర్మాణం టెక్స్ట్ కంటెంట్ 'ఆస్తి ఇక్కడ పేర్కొనబడింది:
మూలకం. టెక్స్ట్ కంటెంట్ | నోడ్. టెక్స్ట్ కంటెంట్రిటర్న్ విలువ: ది ' టెక్స్ట్ కంటెంట్ 'ఆస్తి తిరిగి వస్తుంది' వచనం ”అంతరం ఉన్న మూలకం లేదా నోడ్ యొక్క అంతర్గత HTML ట్యాగ్‌లు లేకుండా.
ఇప్పుడు 'టెక్స్ట్ కంటెంట్' ప్రాపర్టీని యాక్సెస్ చేయడానికి మరియు మానిప్యులేట్ చేయడానికి ఆచరణాత్మకంగా పైన నిర్వచించిన సింటాక్స్‌లను ఉపయోగించండి.
జావాస్క్రిప్ట్‌లో HTML DOM ఎలిమెంట్ “టెక్స్ట్ కంటెంట్” ప్రాపర్టీని ఎలా యాక్సెస్ చేయాలి మరియు మానిప్యులేట్ చేయాలి?
'innerHTML' మరియు 'innerText' లక్షణాల మాదిరిగానే, ' టెక్స్ట్ కంటెంట్ ” ప్రాపర్టీ వినియోగదారులను కావలసిన మూలకం యొక్క వచనాన్ని సులభంగా సెట్ చేయడానికి, యాక్సెస్ చేయడానికి మరియు సవరించడానికి అనుమతిస్తుంది. ఈ విభాగం దిగువ పేర్కొన్న ఉదాహరణలను ఉపయోగించి మూలకంపై ఈ అన్ని కార్యకలాపాలను నిర్వహిస్తుంది.
ఉదాహరణ 1: ఎలిమెంట్/నోడ్ టెక్స్ట్‌ని యాక్సెస్ చేయడానికి “టెక్స్ట్ కంటెంట్” ప్రాపర్టీని వర్తింపజేయడం
ఈ ఉదాహరణ దాని పిల్లలందరితో సహా నిర్దిష్ట మూలకం లేదా నోడ్ యొక్క వచనాన్ని తిరిగి ఇవ్వడానికి “టెక్స్ట్ కంటెంట్” లక్షణాన్ని వర్తిస్తుంది.
HTML కోడ్
< div id = 'myDiv' మౌస్ ఓవర్ = 'getText()' శైలి = 'సరిహద్దు: 3px ఘన నలుపు; వెడల్పు: 400px; పాడింగ్: 5px 5px; మార్జిన్: ఆటో;' >< h1 > మొదటి శీర్షిక < / h1 >
< h2 > రెండవ శీర్షిక < / h2 >
< h3 > మూడవ శీర్షిక < / h3 >
< h4 > నాల్గవ శీర్షిక < / h4 >
< h5 > ఐదవ శీర్షిక < / h5 >
< h6 > ఆరవ శీర్షిక < / h6 >
< / div >
HTML కోడ్ యొక్క పై పంక్తులలో:
- ది ' 'myDiv' అనే idని కలిగి ఉన్న 'ట్యాగ్ ఒక div ఎలిమెంట్‌ను సృష్టిస్తుంది, అది క్రింది లక్షణాల సరిహద్దు, వెడల్పు, పాడింగ్ (ఎగువ మరియు దిగువ, ఎడమ మరియు కుడి) మరియు మార్జిన్‌తో రూపొందించబడింది. ఇది కూడా జతచేస్తుంది ' మౌస్ ఓవర్ 'ప్రేరేపించే సంఘటన' getText() వినియోగదారు దానిపై మౌస్‌ను ఉంచినప్పుడు ” ఫంక్షన్.
- div లోపల, పేర్కొన్న అన్ని హెడింగ్ (h1,h2,h3,h4,h5, మరియు h6) ట్యాగ్‌లు వాటి పేర్కొన్న స్థాయిల ప్రకారం హెడ్డింగ్ ఎలిమెంట్‌లను ఇన్సర్ట్ చేస్తాయి.
జావాస్క్రిప్ట్ కోడ్
< స్క్రిప్ట్ >
ఫంక్షన్ getText ( ) {
elem ఉంది = పత్రం. getElementById ( 'myDiv' ) ;
అప్రమత్తం ( మూలకం. టెక్స్ట్ కంటెంట్ ) ;
}
స్క్రిప్ట్ >పైన వ్రాసిన జావాస్క్రిప్ట్ కోడ్ బ్లాక్‌లో:
- ' అనే ఫంక్షన్‌ను నిర్వచించండి getText() ”.
- ఈ ఫంక్షన్ లోపల, “elem” వేరియబుల్ “ని వర్తింపజేస్తుంది getElementById() ” div మూలకాన్ని దాని id ద్వారా యాక్సెస్ చేసే పద్ధతి.
- ది ' హెచ్చరిక() 'పద్ధతి 'ని ఉపయోగించే హెచ్చరిక పెట్టెను సృష్టిస్తుంది టెక్స్ట్ కంటెంట్ ”దానిపై ఆధారపడిన వారందరితో పాటు పేరెంట్ డివి యొక్క వచనాన్ని తిరిగి ఇవ్వడానికి ఆస్తి.
అవుట్‌పుట్
దిగువ అవుట్‌పుట్ div ఎలిమెంట్ యొక్క టెక్స్ట్ కంటెంట్‌ను చూపించే హెచ్చరిక పెట్టెను పాప్ అప్ చేస్తుంది:
ఉదాహరణ 2: 'టెక్స్ట్ కంటెంట్' ప్రాపర్టీని వర్తింపజేయడం ద్వారా దాని వారసులతో సహా ఎలిమెంట్ టెక్స్ట్ కంటెంట్‌ను భర్తీ చేయడం
'టెక్స్ట్ కంటెంట్' ప్రాపర్టీ దాని టెక్స్ట్‌ను సవరించేటప్పుడు మూలకం యొక్క పిల్లలందరినీ ఎలా భర్తీ చేస్తుందో ఈ ఉదాహరణ చూపిస్తుంది.
HTML కోడ్
< కేంద్రం >
< h1 id = 'నా తల' క్లిక్ చేయండి = 'వచనాన్ని సవరించు()' >< బి > ఈ బి > ఉంది < వ్యవధి > శీర్షిక < వ్యవధి > < i > మూలకం i > h1 >
కేంద్రం >పైన పేర్కొన్న కోడ్ లైన్లలో:
- ది ' 'ట్యాగ్ జోడించిన'తో స్థాయి 1 యొక్క శీర్షిక మూలకాన్ని జోడిస్తుంది క్లిక్ చేయండి 'ప్రేరేపించే సంఘటన' వచనాన్ని సవరించు() 'వినియోగదారు దానిపై క్లిక్ చేసినప్పుడు ఫంక్షన్.
- హెడ్డింగ్ ఎలిమెంట్‌లో “ ',' ', మరియు' ” దాని వారసులుగా ట్యాగ్‌లు. పరివేష్టిత స్ట్రింగ్‌ను బోల్డ్ చేయడానికి “ ” ట్యాగ్ ఉపయోగించబడుతుంది, ఏ స్టైలింగ్ ప్రాపర్టీ లేకుండా “” ట్యాగ్ ఇచ్చిన స్ట్రింగ్‌పై ఎలాంటి స్టైలింగ్‌ను వర్తింపజేయడానికి ఉపయోగించబడుతుంది మరియు “ ” ట్యాగ్ ప్రదర్శించడానికి ఉపయోగించబడుతుంది స్ట్రింగ్ ఇటాలిక్‌గా పేర్కొనబడింది.
జావాస్క్రిప్ట్ కోడ్
< స్క్రిప్ట్ >
ఇక్కడ h1 = పత్రం. getElementById ( 'నా తల' ) ;
కన్సోల్. లాగ్ ( h1 ) ;
ఫంక్షన్ modifyText ( ) {
h1. టెక్స్ట్ కంటెంట్ = 'Linuxhintకి స్వాగతం!' ;
కన్సోల్. లాగ్ ( h1 )
}
స్క్రిప్ట్ >పై జావాస్క్రిప్ట్ కోడ్‌లో:
- “h1” వేరియబుల్ “ని ఉపయోగిస్తుంది document.getElementById() ” హెడ్డింగ్ ఎలిమెంట్‌ని దాని కేటాయించిన ఐడి ద్వారా యాక్సెస్ చేసే పద్ధతి.
- ది ' console.log() ” పద్ధతి దాని కంటెంట్‌ను మార్చడానికి ముందు కన్సోల్‌లో యాక్సెస్ చేయబడిన హెడ్డింగ్ ఎలిమెంట్‌ను ప్రదర్శిస్తుంది.
- ఫంక్షన్ పేరు ' వచనాన్ని సవరించు() 'ఉపయోగిస్తుంది' టెక్స్ట్ కంటెంట్ ” పొందబడిన హెడ్డింగ్ ఎలిమెంట్ యొక్క వచనాన్ని సవరించే లక్షణం.
- చివరి “console.log()” పద్ధతి మళ్లీ మార్పు చేసిన తర్వాత “h1” విలువను ప్రదర్శిస్తుంది.
అవుట్‌పుట్
ఇచ్చిన హెడ్డింగ్ ఎలిమెంట్‌లోని పిల్లలందరూ దానిపై క్లిక్ చేసిన తర్వాత కొత్తగా పేర్కొన్న టెక్స్ట్‌తో భర్తీ చేయబడ్డారని కన్సోల్ స్పష్టంగా చూపిస్తుంది:
ఉదాహరణ 3: ఎలిమెంట్ చైల్డ్ యొక్క టెక్స్ట్‌ను సవరించడానికి “టెక్స్ట్ కంటెంట్” ప్రాపర్టీని వర్తింపజేయడం
ఈ ఉదాహరణ నిర్దిష్ట మూలకం యొక్క చైల్డ్ యొక్క వచనాన్ని సవరించడానికి “టెక్స్ట్ కంటెంట్” లక్షణాన్ని ఉపయోగిస్తుంది.
HTML కోడ్
< div id = 'myDiv' శైలి = 'సరిహద్దు: 3px ఘన నలుపు; వెడల్పు: 400px; పాడింగ్: 5px 5px; మార్జిన్: ఆటో;' >
< కేంద్రం >
< బటన్ id = 'btn' మౌస్ ఓవర్ = 'మార్చువచనం()' > పాత బటన్ < / బటన్ >
< / కేంద్రం >
< / div >ఈ దృష్టాంతంలో:
- 'div' మూలకం 'బటన్' మూలకాన్ని కలిగి ఉంది, అది '' సహాయంతో సృష్టించబడింది.
” ట్యాగ్. - బటన్ మూలకం ఇంకా కేటాయించిన idని కలిగి ఉంటుంది మరియు “ మౌస్ ఓవర్ '' అని పిలిచే సంఘటన వచనాన్ని మార్చండి() మౌస్ దానిపై హోవర్ చేసినప్పుడు ” ఫంక్షన్.
జావాస్క్రిప్ట్ కోడ్
< స్క్రిప్ట్ >
పేరెంట్ ఎలిమెంట్ = పత్రం. getElementById ( 'myDiv' ) ;
var లక్ష్యం = పత్రం. getElementById ( 'btn' ) ;
నన్ను_కనుగొంది = పేరెంట్ ఎలిమెంట్. కలిగి ఉంటుంది ( లక్ష్యం ) ;
ఉంటే ( పేరెంట్ ఎలిమెంట్. కలిగి ఉంటుంది ( లక్ష్యం ) == నిజం ) {
కన్సోల్. లాగ్ ( నన్ను కనిపెట్టు ) ;
ఫంక్షన్ మార్పు టెక్స్ట్ ( ) {
లక్ష్యం. టెక్స్ట్ కంటెంట్ = 'కొత్త బటన్' ;
}
} లేకపోతే {
కన్సోల్. లాగ్ ( 'ఉనికిలో లేదు' )
}
స్క్రిప్ట్ >పై కోడ్ స్నిప్పెట్‌లో:
- “పేరెంట్ ఎలిమెంట్” వేరియబుల్ “ని వర్తింపజేస్తుంది getElementById() ” పేరెంట్ డివి ఎలిమెంట్‌ని యాక్సెస్ చేసే పద్ధతి. 'టార్గెట్' వేరియబుల్ దాని ఐడిని ఉపయోగించి జోడించిన బటన్ ఎలిమెంట్‌ను పొందేందుకు 'getElementById()' పద్ధతిని కూడా ఉపయోగిస్తుంది.
- “find_me” వేరియబుల్ “ని ఉపయోగిస్తుంది కలిగి () టార్గెటెడ్ బటన్ మూలకం div యొక్క చైల్డ్ కాదా అని తనిఖీ చేసే పద్ధతి. ఈ పద్ధతి తిరిగి వస్తుంది ' నిజం 'అవును' లేకపోతే 'తప్పు'.
- ది ' ఉంటే-లేకపోతే ” ప్రకటన కోడ్ బ్లాక్‌ను నిర్వచిస్తుంది.
- లక్ష్యం చేయబడిన మూలకం మాతృ మూలకం యొక్క బిడ్డ అయితే, ' వచనాన్ని మార్చండి() 'ఫంక్షన్ దాని వచనాన్ని ' ద్వారా మారుస్తుంది టెక్స్ట్ కంటెంట్ ”ఆస్తి. లేకపోతే, 'else' కోడ్ బ్లాక్ 'ని ఉపయోగించి పేర్కొన్న సందేశాన్ని ప్రదర్శించడానికి అమలు చేస్తుంది console.log() ” పద్ధతి.
అవుట్‌పుట్
కన్సోల్ ఒక 'ని చూపుతుంది నిజం ” బటన్ ఎలిమెంట్‌ని ధృవీకరించే బూలియన్ విలువ, ఇచ్చిన div యొక్క చైల్డ్ మరియు మౌస్‌ను దానిపై ఉంచిన తర్వాత దాని టెక్స్ట్ మారుతుంది:
textContent, innerText మరియు innerHTML లక్షణాల మధ్య తేడా?
సాధారణంగా, ' టెక్స్ట్ కంటెంట్ ',' అంతర్గత వచనం ', మరియు' అంతర్గత HTML ” ప్రాపర్టీలు ఒక మూలకం లేదా నోడ్ యొక్క టెక్స్ట్‌ని సెట్ చేసే మరియు పొందే విధంగా వ్యవహరిస్తాయి. అయితే, ఈ లక్షణాలు కొన్ని కారకాల ఆధారంగా ఒకదానికొకటి భిన్నంగా ఉంటాయి. ఈ విభాగం వాటన్నింటి మధ్య ప్రధాన వ్యత్యాసాలను హైలైట్ చేస్తుంది:
నిబంధనలు 'వచన కంటెంట్' 'అంతర్గత వచనం' 'innerHTML' రిటర్న్ రకం ఇది దాని పిల్లలు (ఫార్మాటింగ్ ట్యాగ్‌లు), CSS దాచిన వచనం మరియు స్థలంతో సహా మూలకం యొక్క వచనాన్ని అందిస్తుంది. ఇది మూలకం యొక్క HTML ట్యాగ్‌లను తిరిగి ఇవ్వదు. ఇది లక్ష్యం చేయబడిన HTML మూలకం యొక్క టెక్స్ట్ కంటెంట్‌ని దాని పిల్లలందరితో (ఫార్మాటింగ్ ట్యాగ్‌లు) అందిస్తుంది. ఇది