XML DOM ကျူတိုရီရယ်
XML DOM
DOM ဆိုတာဘာလဲ။
DOM သည် စာရွက်စာတမ်းများကို ဝင်ရောက်ကြည့်ရှုခြင်းနှင့် ကြိုးကိုင်ခြင်းအတွက် စံသတ်မှတ်ချက်တစ်ခုကို သတ်မှတ်သည်-
HTML DOM သည် HTML စာရွက်စာတမ်းများကို ဝင်ရောက်ကြည့်ရှုခြင်းနှင့် ကြိုးကိုင်ခြင်းအတွက် စံနည်းလမ်းကို သတ်မှတ်သည်။ ၎င်းသည် HTML စာရွက်စာတမ်းကို သစ်ပင်ဖွဲ့စည်းပုံအဖြစ် တင်ပြသည်။
XML DOM သည် XML စာရွက်စာတမ်းများကို ဝင်ရောက်ကြည့်ရှုခြင်းနှင့် ကြိုးကိုင်ခြင်းအတွက် စံနည်းလမ်းကို သတ်မှတ်သည်။ ၎င်းသည် XML စာရွက်စာတမ်းကို သစ်ပင်ဖွဲ့စည်းပုံအဖြစ် တင်ပြသည်။
HTML သို့မဟုတ် XML နှင့် အလုပ်လုပ်သူတိုင်းအတွက် DOM ကို နားလည်ရန် လိုအပ်ပါသည်။
HTML DOM
HTML ဒြပ်စင်အားလုံးကို HTML DOM မှတဆင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။
ဤဥပမာသည် id="demo" ဖြင့် HTML အစိတ်အပိုင်းတစ်ခု၏တန်ဖိုးကို ပြောင်းလဲသည်-
ဥပမာ
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
ဤဥပမာသည် HTML စာရွက်စာတမ်းရှိ ပထမ <h1> ဒြပ်စင်၏တန်ဖိုးကို ပြောင်းလဲသည်-
ဥပမာ
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
မှတ်ချက်- HTML စာရွက်စာတမ်းတွင် ONE <h1> ဒြပ်စင်တစ်ခုသာ ပါဝင်နေသော်လည်း getElementsByTagName() နည်းလမ်းသည် array တစ်ခုကို အမြဲတမ်း ပြန်ပေးသောကြောင့် သင် array အညွှန်း [0] ကို သတ်မှတ်ရန် လိုအပ်နေသေးသည်။
ကျွန်ုပ်တို့၏ JavaScript သင်ခန်းစာ တွင် HTML DOM အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
XML DOM
XML ဒြပ်စင်အားလုံးကို XML DOM မှတဆင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။
XML DOM သည်-
- XML အတွက် standard object model တစ်ခု
- XML အတွက် standard programming interface တစ်ခု
- ပလပ်ဖောင်း-နှင့် ဘာသာစကား- သီးခြား
- W3C စံနှုန်းတစ်ခု
တစ်နည်းဆိုရသော် XML DOM သည် XML အစိတ်အပိုင်းများကို ရယူရန်၊ ပြောင်းလဲရန်၊ ထည့်ရန် သို့မဟုတ် ဖျက်နည်းအတွက် စံတစ်ခုဖြစ်သည်။
XML Element တစ်ခု၏တန်ဖိုးကို ရယူပါ။
ဤကုဒ်သည် XML စာရွက်စာတမ်းရှိ ပထမ <title> ဒြပ်စင်၏ စာသားတန်ဖိုးကို ထုတ်ယူသည်-
ဥပမာ
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XML ဖိုင်ကို တင်နေသည်။
အောက်ဖော်ပြပါ ဥပမာများတွင် အသုံးပြုသည့် XML ဖိုင်သည် books.xml ဖြစ်သည်။
ဤဥပမာသည် "books.xml" ကို xmlDoc သို့ဖတ်ပြီး books.xml ရှိ ပထမ <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>
နမူနာရှင်းပြထားပါတယ်။
- xmlDoc - parser မှဖန်တီးထားသော XML DOM အရာဝတ္ထု။
- getElementsByTagName("title")[0] - ပထမဆုံး <title> ဒြပ်စင်ကို ရယူပါ။
- childNodes[0] - <title> ဒြပ်စင်၏ ပထမကလေး (စာသား node)
- nodeValue - node ၏တန်ဖိုး (စာသားကိုယ်တိုင်)
XML စာတန်းကို တင်နေသည်။
ဤဥပမာသည် XML DOM အရာဝတ္ထုတစ်ခုထဲသို့ စာသားစာကြောင်းတစ်ခုကို တင်ပြီး ၎င်းမှ အချက်အလက်ကို JavaScript ဖြင့် ထုတ်ယူသည်-
ဥပမာ
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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>
Programming Interface
DOM သည် node objects အစုတစ်ခုအနေဖြင့် XML ကို မော်ဒယ်များ။ node များကို JavaScript သို့မဟုတ် အခြားသော ပရိုဂရမ်းမင်းဘာသာစကားများဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။ ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် JavaScript ကိုအသုံးပြုသည်။
DOM သို့ ပရိုဂရမ်းမင်း၏ အင်တာဖေ့စ်ကို သတ်မှတ်စံသတ်မှတ်ချက်များနှင့် နည်းလမ်းများဖြင့် သတ်မှတ်သည်။
Properties ကို မကြာခဏ ရည်ညွှန်းသည် (ဆိုလိုသည်မှာ nodename သည် "book") ဖြစ်သည်။
နည်းလမ်းများကို ပြီးမြောက် သည်ဟု မကြာခဏ ရည်ညွှန်းကြသည် (ဆိုလိုသည်မှာ "စာအုပ်" ကိုဖျက်ခြင်း)။
XML DOM ဂုဏ်သတ္တိများ
ဤအရာများသည် ပုံမှန် DOM ဂုဏ်သတ္တိများဖြစ်သည်။
- x.nodeName - x ၏အမည်
- x.nodeValue - x တန်ဖိုး
- x.parentNode - x ၏ ပင်မအမှတ်အသား
- x.childNodes - x ၏ ကလေးဆုံမှတ်များ
- x.attributes - x ၏ attribute များ
မှတ်ချက်- အထက်ပါစာရင်းတွင် x သည် node object တစ်ခုဖြစ်သည်။
XML DOM နည်းလမ်းများ
- x.getElementsByTagName( အမည် ) - သတ်မှတ်ထားသော tag အမည်ဖြင့် အစိတ်အပိုင်းအားလုံးကို ရယူပါ။
- x.appendChild( node ) - ကလေး node ကို x သို့ထည့်ပါ။
- x.removeChild( node ) - x မှ ကလေး node တစ်ခုကို ဖယ်ရှားပါ။
မှတ်ချက်- အထက်ပါစာရင်းတွင် x သည် node object တစ်ခုဖြစ်သည်။