XML DOM ట్యూటోరియల్

ఏమి డామ్ ఉంది?

DOM డాక్యుమెంట్ ప్రాప్తించడం మరియు ఆచరణ చేయడానికి ప్రామాణిక నిర్వచనాలను నిర్వచిస్తుంది:

“W3C డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) ప్లాట్ఫారమ్ మరియు భాషా సంబంధితముగా లేని ఇంటర్ఫేస్ ఉంది, ఇది ప్రోగ్రామ్స్ మరియు స్క్రిప్ట్స్ డాక్యుమెంట్ యొక్క విషయం, స్ట్రక్చర్ మరియు స్టైల్స్ ను డైనమికలీ ప్రాప్తించడానికి మరియు నవీకరించడానికి అనుమతిస్తుంది.”

హెచ్ఎంఎల్ DOM హెచ్ఎంఎల్ పత్రాన్ని ప్రాప్తించడం మరియు ఆచరణ చేయడానికి ప్రామాణిక పద్ధతులను నిర్వచిస్తుంది. ఇది హెచ్ఎంఎల్ పత్రాన్ని ట్రీ స్ట్రక్చర్ గా ప్రస్తుతిస్తుంది.

XML DOM సమాచార పత్రాన్ని ప్రాప్తించడం మరియు ఆచరణ చేయడానికి ప్రామాణిక పద్ధతులను నిర్వచిస్తుంది. ఇది XML పత్రాన్ని ట్రీ స్ట్రక్చర్ గా ప్రస్తుతిస్తుంది.

హెచ్ఎంఎల్ లేదా XML వాడే ఎవరికైనా, DOM అర్థం చేసుకోవాలి.

హెచ్ఎంఎల్ డామ్

అన్ని హెచ్ఎంఎల్ ఎలిమెంట్స్ హెచ్ఎంఎల్ డామ్ ద్వారా ప్రాప్తించబడవచ్చు.

ఉదాహరణ 1

ఈ ఉదాహరణలో id="demo" యొక్క HTML మూలకం యొక్క విలువను మార్చడం జరుగుతుంది:

<h1 id="demo">ఇది పేరు</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

మీరే ప్రయత్నించండి

ఉదాహరణ 2

ఈ ఉదాహరణలో HTML డాక్యుమెంట్లోని ప్రథమ <h1> మూలకం యొక్క విలువను మార్చడం జరుగుతుంది:

<h1>ఇది పేరు</h1>
<h1>ఇది పేరు</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

మీరే ప్రయత్నించండి

మౌనికంగా:అయితే HTML డాక్యుమెంట్ ఒకే <h1> మూలకంతో కూడినా, మీరు కూడా సంఖ్యాక్రమణం [0] నిర్దేశించవలసినది ఎందుకంటే getElementsByTagName() పద్ధతి ఎల్లప్పుడూ పేరును సరికొత్త పేర్లు గా ఉంటుంది.

మీరు మా JavaScript ట్యూటోరియల్లో మరిన్ని HTML DOM గురించి తెలుసుకోవచ్చు.

ఎక్స్ఎమ్ఎల్ డోమ్

అన్ని XML మూలకాలను XML DOM ద్వారా పొందవచ్చు.

XML DOM అనేది:

  • XML యొక్క ప్రామాణిక ఆబ్జెక్ట్ మోడల్
  • XML యొక్క ప్రామాణిక ప్రోగ్రామింగ్ ఇంటర్ఫేస్
  • ప్లాట్ఫారమ్ మరియు భాష లేకుండా స్వతంత్రం
  • W3C ప్రామాణికం

అనేకందుకు చెప్పాలంటే: XML DOM పొందడం, మార్చడం, జోడించడం లేదా తొలగించడం గురించిన ప్రామాణిక స్టాండర్డ్ ఉంది.

XML మూలకం యొక్క విలువను పొందండి

ఈ ఉదాహరణలో XML పత్రంలోని ప్రథమ <title> మూలకం యొక్క టెక్స్ట్ విలువను శోధిస్తుంది:

ఉదాహరణ

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

XML ఫైలును లోడ్ చేయండి

ఈ ఉదాహరణలో ఉపయోగించబడిన XML ఫైలు "books.xml" ఉంది.

ఈ ఉదాహరణ "books.xml" ను xmlDoc లోకి చదివి ప్రథమ <title> మూలకం యొక్క టెక్స్ట్ విలువను శోధిస్తుంది:

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

మీరే ప్రయత్నించండి

ఉదాహరణ వివరణ

  1. xmlDoc - పార్సర్ ద్వారా సృష్టించబడిన XML DOM ఆబ్జెక్ట్
  2. getElementsByTagName("title")[0] - మొదటి <title> ఎలిమెంట్ పొందడం
  3. childNodes[0] - <title> ఎలిమెంట్ యొక్క మొదటి పిల్లలు నోడ్ (టెక్స్ట్ నోడ్)
  4. nodeValue - నోడ్ యొక్క విలువ (టెక్స్ట్ యొక్క స్వంత విలువ)

ఎక్సిక్యూట్ చేయబడిన XML స్ట్రింగ్

ఈ ఉదాహరణలో, మేము టెక్స్ట్ స్ట్రింగ్ ను XML DOM ఆబ్జెక్ట్లో లోడ్ చేస్తాము మరియు జావాస్క్రిప్ట్ ద్వారా దాని నుండి సమాచారాన్ని పొందుతాము:

ఉదాహరణ

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

మీరే ప్రయత్నించండి

ప్రోగ్రామింగ్ ఇంటర్ఫేస్

DOM XML ను నోడ్ ఆబ్జెక్ట్ల సమూహంగా మోడల్ చేస్తుంది. జావాస్క్రిప్ట్ లేదా ఇతర ప్రోగ్రామింగ్ భాషలను ఉపయోగించి నోడ్లను ప్రాప్తించవచ్చు. ఈ పాఠ్యక్రమంలో, మేము జావాస్క్రిప్ట్ ను ఉపయోగిస్తాము.

DOM ప్రోగ్రామింగ్ ఇంటర్ఫేస్ ప్రమాణబద్ధ అంశాలు మరియు పద్ధతులను నిర్వచిస్తుంది.

అంశాలుసాధారణంగా, ఏమి అని సూచిస్తుంది (ఉదా. nodename అని "book").

పద్ధతులుసాధారణంగా, ఏమి చేయాలో సూచిస్తుంది (ఉదా. "book" ను తొలగించడం వంటి చర్యలు).

XML DOM అంశాలు

ఇవి సాధారణమైన DOM అంశాలు ఉన్నాయి:

  • x.nodeName - x యొక్క పేరు
  • x.nodeValue - x యొక్క విలువ
  • x.parentNode - x యొక్క పితురం నోడ్
  • x.childNodes - x యొక్క పిల్లలు నోడ్
  • x.attributes - x యొక్క అంశం నోడ్

注释：పైని జాబితాలో, x ఒక నోడ్ ఆబ్జెక్ట్ ఉంది.

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。