XML DOM Tutorial

Ano ang DOM?

Ang DOM ay nagtatalaga ng mga pangkaraniwang paraan para sa pag-access at paggamit ng dokumento:

“Ang W3C Document Object Model (DOM) ay isang interface na hindi depende sa platform at wika, na nagbibigay sa mga programa at script na mapag-dinamikang ma-access at upang baguhin ang nilalaman, straktura at estilo ng dokumento.”

Ang HTML DOM ay nagtatalaga ng mga pangkaraniwang paraan para sa pag-access at paggamit ng HTML dokumento. Ito ay nagpapakita ng HTML dokumento bilang isang estraktura ng puno.

Ang XML DOM ay nagtatalaga ng mga pangkaraniwang paraan para sa pag-access at paggamit ng XML dokumento. Ito ay nagpapakita ng XML dokumento bilang isang estraktura ng puno.

Para sa lahat ng gumagamit ng HTML o XML, ang pag-unawa sa DOM ay kinakailangan.

HTML DOM

Ang lahat ng mga HTML na elemento ay maaaring ma-access sa pamamagitan ng HTML DOM.

Halimbawa 1

Ang halimbawa na ito ay nagbabago ng halaga ng elemento na may id na "demo":

<h1 id="demo">Ang linya nito ay ang pamagat</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Subukan nang personal

Halimbawa 2

Ang halimbawa na ito ay nagbabago ng halaga ng unang <h1> elemento sa dokumentong HTML:

<h1>Ang linya nito ay ang pamagat</h1>
<h1>Ang linya nito ay ang pamagat</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Subukan nang personal

Babala:Kahit na ang dokumentong HTML ay naglalaman lamang ng isang <h1> elemento, dapat mong ilagay ang array index [0] pa rin, dahil ang getElementsByTagName() method ay palaging nagbibigay ng isang array.

Maaaring matuto pa nang higit pa tungkol sa HTML DOM sa aming tutorial sa JavaScript.

DOM ng XML

Ang lahat ng XML elemento ay maaring ma-access sa pamamagitan ng XML DOM.

Ang XML DOM ay:

  • Objekto modelo ng XML
  • Pamantayan ng programang pang-Wika ng XML
  • Hindi nakasalalay sa platform at wika
  • Pamantayan ng W3C

Sa ibang salita: Ang XML DOM ay ang pamantayan para sa kung paano hahanapin, baguhin, idagdag o alisin ang XML elemento.

Hahanap ng halaga ng XML elemento

Ang halimbawa na ito ay hahanap ng teksto ng unang <title> elemento sa XML dokumento:

Ehemplo

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

Maglalad ng XML file

Ang XML na ginamit sa halimbawa na ito ay books.xml.

Ang halimbawa na ito ay magbasa ng "books.xml" sa xmlDoc at hahanap ng teksto ng unang <title> elemento sa books.xml:

Ehemplo

<!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>

Subukan nang personal

Paliwanag ng ehemplo

  1. xmlDoc - Ang XML DOM object na naka-create ng parser
  2. getElementsByTagName("title")[0] - Ang unang elemento <title> na naka-create ng parser
  3. childNodes[0] - Ang unang anak ng elemento <title> (node na teksto)
  4. nodeValue - Ang halaga ng node (ang teksto mismo)

I-load ang string ng XML

Ang ehemplo na ito ay maglala ng string ng teksto sa objekto ng XML DOM, at mag-extract ng impormasyon gamit ang JavaScript:

Ehemplo

<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>

Subukan nang personal

Programming Interface

Ang DOM ay nagbabalangkas ng XML bilang isang grupo ng mga objekto ng node. Maaaring ma-access ang mga node gamit ang JavaScript o ibang wika ng pamamahala. Sa tutorial na ito, gamit namin ang JavaScript.

Ang programming interface ng DOM ay binigay ng isang grupo ng standard na propersyong at mga paraan.

PropersyongKaraniwang inaangkin bilang ang kasalukuyan ng bagay (tulad ng nodename ay "book").

Mga paraanKaraniwang inaangkin bilang ang gagawin (tulad ng pag-alis ng "book" na aksyon).

Propersyong XML DOM

Ito ay ilang tipikal na propersyong DOM:

  • x.nodeName - Ang pangalan ng x
  • x.nodeValue - Ang halaga ng x
  • x.parentNode - Ang magulang na node ng x
  • x.childNodes - Ang mga anak na node ng x
  • x.attributes - Ang mga propersyong node ng x

Komento:Sa listahan sa itaas, ang x ay isang objekto ng node.

Mga Paraan ng XML DOM

  • x.getElementsByTagName(name) - Kumuha ng lahat ng elementong may tinutukoy na pangalan
  • x.appendChild(node) - magdagdag ng isang anak na node sa x
  • x.removeChild(node) - Alisin ang mga anak na node mula sa x

Komento:Sa itaas na listahan,x Ito ay isang node object.