జావాస్క్రిప్ట్ హ్ట్మ్ల్ డామ్ నేవిగేషన్
- ముంది పేజీ డిఒఎమ్ ఇవెంట్ లిస్టెనర్
- తదుపరి పేజీ డిఒఎమ్ నోడ్
HTML DOM ద్వారా, నోడ్ వృక్షంలో నోడ్లను నావిగేట్ చేయవచ్చు నోడ్ సంబంధాలు ఉపయోగించి.
డిఒఎమ్ నోడ్
W3C HTML DOM ప్రమాణాల ప్రకారం, HTML డాక్యుమెంట్లో అన్ని విషయాలు నోడ్లు అని పిలుస్తారు:
- మొత్తం డాక్యుమెంట్ అనేది డాక్యుమెంట్ నోడ్
- ప్రతి HTML ఎలమెంట్ అనేది ఎలమెంట్ నోడ్
- HTML ఎలమెంట్లోని టెక్స్ట్ అనేది టెక్స్ట్ నోడ్
- ప్రతి HTML అట్రిబ్యూట్ అనేది అట్రిబ్యూట్ నోడ్
- అన్ని కోమెంట్లు కోమెంట్ నోడ్లు
HTML DOM ఉపయోగించి, నోడ్ వృక్షంలోని అన్ని నోడ్లను JavaScript ద్వారా ప్రాప్తించవచ్చు.
కొత్త నోడ్లను సృష్టించవచ్చు, అలాగే అన్ని నోడ్లను సవరించవచ్చు మరియు తొలగించవచ్చు.
నోడ్ సంబంధాలు
నోడ్ వృక్షంలో నోడ్లు పరస్పరం కొంత స్థాయి సంబంధాన్ని కలిగి ఉంటాయి.
- పదాలు (పితాకుడు, కుమారుడు, సోదర సోదరీమణులు, parent, child మరియు sibling) ఈ సంబంధాలను వివరించడానికి ఉపయోగిస్తారు.
- నోడ్ వృక్షంలో, పైని నోడ్ అనేది మూల (మూల నోడ్ కుమారుడు లేదు) అని పిలుస్తారు.
- ప్రతి నోడ్ కుమారుడు ఉంటాడు, మూల నోడ్ అనేది తప్ప (మూల నోడ్ కుమారుడు లేదు).
- నోడ్లు కొంత సంఖ్యలో కుమారులను కలిగి ఉంటాయి.
- సోదర సోదరీమణులు (సోదరులు లేదా సోదరీమణులు) అనేది ఒకే తల్లి కలిగిన నోడ్లు అని అర్థం వస్తుంది.
<html>
<head>
<title>DOM శిక్షణా పత్రం</title>
</head>
<body>
<h1>DOM మొదటి పాఠ్యక్రమం</h1>
<p>Hello world!</p>
</body>
</html>
పైని HTML నుండి మీరు ఈ సమాచారాన్ని చదవగలరు:
- html అనేది మూల నోడ్
- html కుమారుడు లేదు
- html అనేది head మరియు body యొక్క తల్లి
- head అనేది html యొక్క మొదటి కుమారుడు
- <body> <html> యొక్క చివరి సంకేతం
అలాగే:
- <head> ఒక సంకేతం కలిగి ఉంది: <title>
- <title> ఒక సంకేతం (పదబంధ నోడ్) కలిగి ఉంది: "DOM శిక్షణ"
- <body> రెండు సంకేతాలను కలిగి ఉంది: <h1> మరియు <p>
- <h1> ఒక సంకేతం కలిగి ఉంది: "DOM మొదటి పాఠం"
- <p> ఒక సంకేతం కలిగి ఉంది: "హలో వరల్డ!"
- <h1> మరియు <p> సహోదర నోడ్లు
నోడ్ల మధ్య ప్రయాణం
జావాస్క్రిప్ట్ ద్వారా, మీరు క్రింది నోడ్ల మధ్య ప్రయాణించడానికి క్రింది నోడ్ లభ్యతలను ఉపయోగించవచ్చు:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
సంకేతాలు మరియు నోడ్ విలువ
DOM ప్రాసెసింగ్ లో ఒక సాధారణ తప్పు అంశ నోడ్లో పదబంధాన్ని కలిగినట్లు భావించడం.
ఉదాహరణ:
<title id="demo">DOM శిక్షణ</title>
పై ఉదాహరణలో ఉన్న అంశ నోడ్ <title> లేదుపదబంధాన్ని కలిగి ఉంటుంది.
ఇది "DOM శిక్షణ" విలువ కలిగినపదబంధ నోడ్.
లభ్యత ద్వారా పొందవచ్చు: innerHTML లభ్యతను అనుసంధానించడం ద్వారా పొందవచ్చు:
var myTitle = document.getElementById("demo").innerHTML;
innerHTML లభ్యత సమానంగా మొదటి సంకేతం లభ్యత పొందడానికి చేయవచ్చు: nodeValue:
var myTitle = document.getElementById("demo").firstChild.nodeValue;
మొదటి సంకేతం పొందడానికి కూడా ఈ విధంగా చేయవచ్చు:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
ఈ మూడు ఉదాహరణలు పొందుతాయి <h1> అంశపు పదబంధాన్ని కాపీ చేయడానికి <p> అంశంలో:
ఉదాహరణ 1
<html>
<body>
<h1 id="id01">నా మొదటి పేజీ</h1>
<p id="id02">హలో!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
ఉదాహరణ 2
<html>
<body>
<h1 id="id01">నా మొదటి పేజీ</h1>
<p id="id02">హలో!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
ఉదాహరణ 3
<html>
<body>
<h1 id="id01">నా మొదటి పేజీ</h1>
<p id="id02">హలో!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
ఈ పాఠ్యంలో మేము innerHTML హెచ్ఎంఎల్ అంశం సమాచారాన్ని పొందుతుంది.
అయితే, పైన పేర్కొన్న ఇతర పద్ధతులను నేర్చుకోవడం ద్వారా DOM వృక్షం రచన మరియు నావిగేషన్ ను అర్థం చేసుకోవడం సులభం అవుతుంది.
DOM పునఃపునిర్మాణ అంశం
పూర్తి డాక్యుమెంట్ ను పొందడానికి రెండు ప్రత్యేక అంశాలు ఉన్నాయి:
- document.body - డాక్యుమెంట్ యొక్క body
- document.documentElement - పూర్తి డాక్యుమెంట్
ఉదాహరణ
<html> <body> <p>Hello World!</p> <div> <p>DOM అనేది అత్యంత ఉపయోగపడుతుంది!</p> <p>ఈ ఉదాహరణలో మేము <b>document.body</b> అంశాన్ని ప్రదర్శిస్తున్నాము.</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
ఉదాహరణ
<html> <body> <p>Hello World!</p> <div> <p>DOM అనేది అత్యంత ఉపయోగపడుతుంది!</p> <p>ఈ ఉదాహరణలో మేము <b>document.documentElement</b> అంశాన్ని ప్రదర్శిస్తున్నాము.</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
nodeName అంశం
nodeName అంశం పేరు నిర్ణయిస్తుంది.
- nodeName అనే స్పష్టం చేస్తుంది
- ఎలమెంట్ అంశం నుండి �nodeName టాగ్ పేరు సమానం ఉంటుంది
- అంశం నుండి �nodeName అంశం అనే పేరు ఉంటుంది
- టెక్స్ట్ అంశం నుండి �nodeName ఎల్లప్పుడూ #text ఉంటుంది
- డాక్యుమెంట్ అంశం నుండి �nodeName ఎల్లప్పుడూ #document ఉంటుంది
ఉదాహరణ
<h1 id="id01">నా మొదటి వెబ్ పేజీ</h1>
<p id="id02">హలో!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
గమనిక:nodeName ఎల్లప్పుడూ HTML అంశం పెద్ద టాగ్ పేరును కలిగి ఉంటుంది.
nodeValue అంశం
nodeValue అంశం విలువ నిర్ణయిస్తుంది.
- ఎలమెంట్ అంశం నుండి నోడ్ వాల్యూ అనియంత్రిత అనే స్పష్టం చేస్తుంది.
- టెక్స్ట్ అంశం నుండి నోడ్ వాల్యూ టెక్స్ట్ అనే స్పష్టం చేస్తుంది.
- అంశం నుండి నోడ్ వాల్యూ అంశం అనే స్పష్టం చేస్తుంది.
nodeType అంశం
nodeType అంశం రకం అనే స్పష్టం చేస్తుంది.nodeType సిద్ధాంతం.
ఉదాహరణ
<h1 id="id01">నా మొదటి వెబ్ పేజీ</h1>
<p id="id02">హలో!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
అత్యంత ముఖ్యమైన nodeType అంశం ఈ ఉంది:
| నోడ్ | రకం | ఉదాహరణ |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (తొలగించబడింది) |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | /* ఈ కామెంట్ */ |
| DOCUMENT_NODE | 9 | హెచ్టిఎమ్ఎల్ డాక్యుమెంట్ తనంత పైబడిన (హెచ్టిఎల్ కి పైబడిన) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
టైప్ 2 హెచ్టిఎమ్ఎల్ డోమ్ లో తొలగించబడింది. ఎక్సిఎమ్ఎల్ డోమ్ లో తొలగించబడలేదు.
- ముంది పేజీ డిఒఎమ్ ఇవెంట్ లిస్టెనర్
- తదుపరి పేజీ డిఒఎమ్ నోడ్
