JS XML DOM ~ Bloglieken

XML DOM
XML Document Object Model (XML DOM) adalah sebuah standar cara mengakses dan memanipulasi dokumen XML DOM membagi dokumen XML sebagai struktur pohon (tree-structure) dengan elemen, atribut dan text yang didefinisikan sebagai node.

Sebagai dasar, perlu dipelajari terlebih dahulu tentang :

1. HTML/XHTML

2. JavaScript

3. XML

Isi XML dapat dimodifikasi, dihapus, atau ditambakan elemen baru. Elemen, teks dan atribut adalah sebuah node. Jadi, semua yang ada pada XML adalah sebuah node sehingga :

1. Seluruh dokumen adalah sebuah document node.

2. Setiap tag XML adalah element node.

3. Isi teks dalam elemen XML adalah text node.

4. Comment adalah comment node.

*******..Node Hierarchy

Semua node di dokumen XML berbentuk document tree (node tree). Masing – masing elemen, atribut, text, dll dalam documen XML merepresentasikan node dalam pohon (tree). Tree dimulai dari node document dan berlanjut ke cabang sampa ke level tree yang paling bawah.

Hubungan “parent” dan “child” digunakan untuk menerangkan hubungan diantara node. Beberapa node mungkin mempunyai child node selama node yang lain tidak mempunyai daun (leaf node).

Alasannya, data XML berbentuk tree sehingga dapat dilewati tanpa mengetahui struktur asli dan tipe data yang diisikan.

******.. Find and Access Nodes :

Untuk dapat mencari elemen yang kita inginkan dan memanipulasinya terdapat beberapa cara :

a) Menggunakan method getElementsByTagName().

b) Menggunakan properti elemen node parentNode, firstChild, dan lastChild.ses Node XML DOM

getElementsByTagName("tagName");

Method diatas adalah untuk mengakses atau mencari elemen yang kita inginkan.

Untuk penelusuran semua node menggunakan perulangan sampai habis dibutuhkan properti length.

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElemensByTagName("book");

for (var i=0;i<x.length;i++)

{

}

Penulisan

Bentuk umum :

getElementsByTagName("title")[0].
childNodes[0]nodeValue

contoh : mengakses string pada tag title

var x=getElementsByTagName("title");

for (i=0;i<x.length;i++)

{

document.write(x[i].
childNodes[0].nodeValue);

}

Output :

Basis Data

Strategic Manajement

Pemrograman Internet

Belajar XML

Mengetahui panjang NameNodeMap

getElementsByTagName("title")[0].
attributes.length

Output :

Mengambil nilai (value) dari sebuah item NameNodeMap

xmlDoc=loadXMLDoc("books.xml");

var x=getElementsByTagName("book");

for (i=0;i<x.length;i++)

{

//the attlist variable will hold a NameNodeMap

var attlist=x.item(i).attributes;

var att=attlist.getNameItem("categori");

document.write(att.value + "<br />");

}

Output :

PROGRAMING

MANAJEMEN

WEB

Parsing XML DOM (Microsoft’s)

var xmlDoc=new
ActiveXObject("Microsoft.XMLDOM");

Parsing XML DOM (Mozilla, Firefox, dan Opera)

var xmlDoc=document.implementation.
createDocument("ns","root",null);

Paramenter pertama adalah ns, mendefinisikan namespace yang digunakan untuk nama dokumen XML. Parameter kedua root, adalah elemen root XML dalam file XML. Paramenter ketiga, null, akan selalu diisi null karena belum diimplementasikan.

Ex :

var xmlDoc=document.
implementation.
createDocument("","",null);

xmlDoc.load("note.xml");

Parsing File XML – Cross Browser

Contoh berikut adalah bagaimana me-load dokumen XML “note.xml” kedalam XML parser.

XML : dom/note.xml

<heading>Reminder</heading>

<body>Jangan lupa acara malam minggu ini!</body>

</note>

HTML : dom/xml_dom01.html

<html>

<head>

var xmlDoc;

function loadXML()

{

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

xmlDoc.load("note.xml");

getmessage();

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation &&

document.implementation.createDocument)

{

xmlDoc=document.implementation.
createDocument("","",null);

xmlDoc.load("note.xml");

xmlDoc.onload=getmessage;

}

else

{

alert('Your browser cannot handle this script');

}

function getmessage()

{

document.getElementById("to").innerHTML=

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

document.getElementById("from").innerHTML=

xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;

document.getElementById("message").innerHTML=

xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

}

</script>

</head>

<h1>Internal Note</h1>

<b>Message:</b> <span id="message"></span>

</p>

</body>

</html>

Parsing String XML – Cross Browser

Kode berikut adalah contoh meload dan parsing sebuah string XML yang dapat dijalankan di semua browser.

HTML : dom/XML_dom02.html

<html>

<body>

var text="<note>";

text=text+"<to>Andi</to>";

text=text+"<from>Joe</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Jangan lupa malam Mingguan!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{

var doc=new ActiveXObject("Microsoft.XMLDOM");

doc.async="false";

doc.loadXML(text);

}

// code for Mozilla, Firefox, Opera, etc.

else

{

var parser=new DOMParser();

var doc=parser.parseFromString(text,"text/xml");

}

// documentElement always represents the root node

var x=doc.documentElement;

document.write("<b>Text child element pertama:</b> ");

document.write(x.childNodes[0].
childNodes[0].nodeValue);

document.write("<br />");

document.write("<b>Text child element kedua :</b> ");

document.write(x.childNodes[1].
childNodes[0].nodeValue);

</script>

</body>

</html>

Menjelajah Node Tree

Contoh berikut bagaimana melakukan perulangan (loop) semua child node dari <note> dan menampilkan nama node dan nilai node (node value) dari masing – masing node.

HTML : dom/xml_dom03.html

<html>

<body>

var text="<note>";

text=text+"<to>Andi</to>";

text=text+"<from>Joe</from>";

text=text+"<heading>Reminder</heading>";

text=text+"<body>Jangan lupa malam Mingguan!</body>";

text=text+"</note>";

// code for IE

if (window.ActiveXObject)

{