జావాస్క్రిప్ట్‌లో, DOM ట్రీ పెద్ద నోడ్‌ల జాబితాను కలిగి ఉన్న క్రమానుగత నిర్మాణాన్ని అనుసరిస్తుంది. నిర్మాణం రూట్ నోడ్ (పత్రం) నుండి ప్రారంభమవుతుంది మరియు తర్వాత పేరెంట్ మరియు చైల్డ్ నోడ్‌లతో జతచేయబడుతుంది. ఈ చైల్డ్ నోడ్‌లను యాక్సెస్ చేయడానికి, JavaScript అందిస్తుంది “ చైల్డ్ నోడ్స్ ”ఆస్తి. అనుబంధిత పేరెంట్ ఎలిమెంట్ యొక్క మొత్తం లేదా నిర్దిష్ట చైల్డ్ నోడ్‌ని యాక్సెస్ చేయడానికి ఈ ప్రాపర్టీ వినియోగదారులకు సహాయపడుతుంది.
ఈ పోస్ట్ జావాస్క్రిప్ట్‌లోని HTML DOM మూలకం “చైల్డ్‌నోడ్స్” ప్రాపర్టీ యొక్క లక్ష్యం మరియు పని గురించి వివరిస్తుంది.
జావాస్క్రిప్ట్‌లోని HTML DOM ఎలిమెంట్ “చైల్డ్‌నోడ్స్” ప్రాపర్టీ అంటే ఏమిటి?
ది ' చైల్డ్ నోడ్స్ ” అనేది రీడ్-ఓన్లీ ప్రాపర్టీ, ఇది నోడ్‌లిస్ట్ ఆబ్జెక్ట్ రూపంలో మూలకం యొక్క అన్ని చైల్డ్ నోడ్‌ల జాబితాను అందిస్తుంది. పేరెంట్ ఎలిమెంట్ యొక్క నిర్దిష్ట చైల్డ్ నోడ్‌ను యాక్సెస్ చేయడానికి కూడా ఈ ప్రత్యేక ప్రాపర్టీని ఉపయోగించవచ్చు. చైల్డ్ నోడ్ '0 (సున్నా)' సూచిక నుండి ప్రారంభమవుతుంది. అంతేకాకుండా, వైట్‌స్పేస్‌లు, కామెంట్‌లు మరియు టెక్స్ట్ నోడ్‌లు కూడా చైల్డ్ నోడ్‌లుగా పరిగణించబడతాయి.
వాక్యనిర్మాణం
మూలకం.చైల్డ్ నోడ్స్
ఎగువ-సాధారణీకరించిన సింటాక్స్ లక్ష్యం చేయబడిన మూలకం యొక్క చైల్డ్ నోడ్‌లను కలిగి ఉన్న NodeList ఆబ్జెక్ట్‌ను అందిస్తుంది.
పైన నిర్వచించిన వాక్యనిర్మాణాలను ఆచరణాత్మకంగా ఉపయోగిస్తాము.
HTML కోడ్
ముందుగా, పేర్కొన్న HTML కోడ్‌ను చూడండి:
< div id = 'డివ్' శైలి = 'సరిహద్దు: 2px ఘన నలుపు; ఎత్తు: 200px; వెడల్పు: 250px; పాడింగ్: 10px' >< h2 > మొదటి శీర్షిక h2 >
< h3 > రెండవ శీర్షిక h3 >
< p > మొదటి పేరా p >
< p > రెండవ పేరా p >
div >
< p id = 'కోసం' > p >
పై కోడ్ లైన్లలో:
- ఒక 'ని జోడించండి 'Div' అనే idతో మూలకం, పేర్కొన్న (సరిహద్దు, ఎత్తు మరియు వెడల్పు) లక్షణాల సహాయంతో రూపొందించబడింది.
- “
” మూలకంలో, వరుసగా రెండు శీర్షికలు మరియు రెండు పేరాలను నిర్వచించండి.- చివరగా, ' ”ట్యాగ్ “పారా” ఐడితో ఖాళీ పేరాను పొందుపరుస్తుంది.
గమనిక: పేర్కొన్న HTML కోడ్ ఈ పోస్ట్ అంతటా పరిగణించబడుతుంది.
ఉదాహరణ 1: ఒక నిర్దిష్ట మూలకం యొక్క మొత్తం చైల్డ్ నోడ్‌ల సంఖ్యను పొందడానికి “చైల్డ్‌నోడ్స్” ఆస్తిని వర్తింపజేయడం
ఈ ఉదాహరణ నిర్దిష్ట పేరెంట్ ఎలిమెంట్‌లో ఉన్న మొత్తం చైల్డ్ నోడ్‌ల సంఖ్యను పొందడానికి “చైల్డ్‌నోడ్‌లు” మరియు “పొడవు” లక్షణాలను ఉపయోగిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
ఇచ్చిన కోడ్‌ని అనుసరించండి:
< స్క్రిప్ట్ >
const elem = document.getElementById ( 'డివ్' ) ;
వీలు నం = elem.childNodes.length;
document.getElementById ( 'కోసం' ) .innerHTML = 'విలువ: ' + సంఖ్య;
స్క్రిప్ట్ >పై కోడ్ లైన్లలో:
- “elem” వేరియబుల్ “ని ఉపయోగిస్తుంది getElementById() 'Div' ఐడి ఉన్న పేరెంట్ ఎలిమెంట్‌ను యాక్సెస్ చేసే పద్ధతి.
- “num” వేరియబుల్ “ని ఉపయోగిస్తుంది చైల్డ్ నోడ్స్ 'మరియు' పొడవు యాక్సెస్ చేయబడిన “” మూలకంలో ఉన్న చైల్డ్ నోడ్‌ల సంఖ్యను పొందడానికి ” లక్షణాలు.
- చివరగా, “getElementById()” పద్ధతి ఎంబెడెడ్ ఖాళీ పేరాగ్రాఫ్‌ని “num” వేరియబుల్ విలువతో జోడించడానికి దాని id “para” ద్వారా పొందుతుంది.
అవుట్‌పుట్
అవుట్‌పుట్ మొత్తం ఉందని సూచిస్తుంది ' 9 ” మూలకాల మధ్య ఖాళీలతో సహా ఇవ్వబడిన “
” మూలకంలో చైల్డ్ నోడ్‌లు.ఉదాహరణ 2: నిర్దిష్ట చైల్డ్ నోడ్ పేరును పొందడానికి “చైల్డ్ నోడ్స్” ప్రాపర్టీని వర్తింపజేయడం
చైల్డ్ నోడ్(లు) పేరును పొందడానికి 'nodeName' ఆస్తితో 'childNodes' ఆస్తిని కూడా ఉపయోగించవచ్చు. ఆచరణాత్మకంగా చూద్దాం.
జావాస్క్రిప్ట్ కోడ్
కింది కోడ్ ద్వారా వెళ్ళండి:
< స్క్రిప్ట్ >
const elem = document.getElementById ( 'డివ్' ) ;
వీలు num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'కోసం' ) .innerHTML = 'మూలకం: ' +సంఖ్య;
స్క్రిప్ట్ >ఇక్కడ, ' చైల్డ్ నోడ్స్ 'ఆస్తి'తో ముడిపడి ఉంది నోడ్ పేరు యాక్సెస్ చేయబడిన ఇండెక్స్ ఆధారంగా పేర్కొన్న చైల్డ్ నోడ్ పేరును పొందడానికి '1' ఆస్తి.
అవుట్‌పుట్
అవుట్‌పుట్ చైల్డ్ నోడ్ పేరును ప్రదర్శిస్తుంది అంటే, పేర్కొన్న సూచికకు వ్యతిరేకంగా 'H2' మూలకం.
ఉదాహరణ 3: నిర్దిష్ట చైల్డ్ నోడ్ యొక్క టెక్స్ట్ రంగును మార్చడానికి “చైల్డ్ నోడ్స్” ప్రాపర్టీని వర్తింపజేయడం
ఈ ఉదాహరణ లక్ష్యం సూచిక చేయబడిన పిల్లల రంగును మార్చడానికి చర్చించబడిన ఆస్తిని ఉపయోగిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
కింది కోడ్‌ను పరిగణించండి:
< స్క్రిప్ట్ >
document.getElementById ( 'డివ్' ) .చైల్డ్ నోడ్స్ [ 3 ] .style.color = 'ఆకుపచ్చ' ;
స్క్రిప్ట్ >ఇక్కడ, ' getElementById() ” పద్ధతి దాని id “Div” ద్వారా పేరెంట్ “
” మూలకాన్ని పొందుతుంది మరియు దాని చైల్డ్ నోడ్‌ని పేర్కొన్న ఇండెక్స్‌లో ఉంచబడుతుంది “ చైల్డ్ నోడ్స్ ”ఆస్తి, వరుసగా. ఆ తర్వాత, 'ని ఉపయోగించండి శైలి.రంగు ”యాక్సెస్ చేయబడిన చైల్డ్ నోడ్ యొక్క టెక్స్ట్ రంగును మార్చడానికి ప్రాపర్టీ.అవుట్‌పుట్
పేర్కొన్న చైల్డ్ నోడ్ యొక్క టెక్స్ట్ రంగు తగిన విధంగా మార్చబడిందని అవుట్‌పుట్ నిర్ధారిస్తుంది.
ముగింపు
జావాస్క్రిప్ట్‌లో, ' చైల్డ్ నోడ్స్ ” ఆస్తి లక్ష్య HTML మూలకం యొక్క చైల్డ్ నోడ్‌లను కలిగి ఉన్న నోడ్‌లిస్ట్ ఆబ్జెక్ట్‌ను తిరిగి పొందుతుంది. 'చైల్డ్ నోడ్స్' ప్రాపర్టీతో ఇండెక్స్ నంబర్‌ను పేర్కొనడం ద్వారా చైల్డ్ నోడ్‌లను ఒకేసారి లేదా కావలసిన వాటిని యాక్సెస్ చేయవచ్చు. ఈ ప్రాపర్టీ యాక్సెస్ చేయబడిన చైల్డ్ నోడ్‌లలో ప్రత్యేక విధులను నిర్వహించడానికి JavaScript ఫంక్షన్‌ని అమలు చేయడానికి అనుమతిస్తుంది. ఈ కథనం జావాస్క్రిప్ట్‌లో “చైల్డ్‌నోడ్స్” ప్రాపర్టీని వర్తింపజేయడం గురించి వివరించింది.
- “