Document Object Model 97
11 DOCUMENT OBJECT
MODEL
Overview
Bab ini mengenalkan DOM (Document Object Model) dan penggunaannya dalam program untuk mengakses dan memanipulasi dokumen XML.
Tujuan
1. mengenal DOM XML
98
11.1 Pengantar
Document Object Model (DOM) mendefinisikan struktur lojik dokumen XML, cara mengakses dan memanipulasinya. Ia menyediakan Application Programming Interface (API) untuk dokumen XML dan HTML. Nama DOM dipilih karena ia dirancang dekat dengan paradigma object- oriented: dokumen XML tersusun atas object-object. Setiap object memiliki property dan method pengaksesnya. Menggunakan DOM, pemrogram dapat membuat dokumen XML, menelusuri strukturnya, menambah, memodifikasi, atau menghapus elemen-elemen dan isinya.
Object-object dan method-method yang disediakan oleh DOM dapat digunakan dalam beragam bahasa pemrograman, semisal Java, C++, dan Visual Basic. Object-object ini dapat juga digunakan dalam bahasa script, seperti VBScript dan JavaScript.
Untuk dapat menggunakan fitur-fitur XML, DOM menggunakan parser DOM-enabled, misalnya MSXML. Parser DOMenabled membaca dokumen XML, menelusurinya, meyakinkan bahwa ia valid. Kemudian, ia membuat representasi memori dalam struktur data tree. Struktur tree terbuat dari node-node. Anda dapat menggunakan object-object DOM yang disediakan parser DOM-enabled untuk memanipulasi node-node ini.
11.2 Implementasi dalam MSXML Parser
Implementasi DOM dalam Microsoft XML
Parser (MSXML) menyediakan interface
dasar dan lanjut. Interface dasar DOMDocument dan IXMLDOMNode, dipakai untuk me-load atau membuat dokumen. Dengan interface tambahan, dapat dilakukan operasi pelacakan error.
MSXML parser membuat struktur tree DOM. Struktur tree ini dapat digunakan beragam aplikasi untuk mengakses dan memanipulasi dokumen XML. Gambar 10.1 menunjukkan bagaimana struktur tree DOM digunakan aplikasi untuk mengakses informasi dalam dokumen XML. Hal yang sama berlaku untuk parser berbasis Java dan lainnya.
Document Object Model 99
10 0
MSXML Library
Dokumen
XML Parser D ORoot M T r e e Aplikasi Child
Child text
text
Gambar 10.1 DOM, Dokumen XML dan Application
Perhatikan potongan program berikut: <PRODUCTDETAIL
S> <PRODUCT>
<PRODID>P001</PRODID>
<PRODNAME> Beras </PRODNAME> <PROD>5000</SALARY>
</ PRODUCT> <PRODUCT>
<PRODID>P002</PRODID>
<PRODNAME> Jagung </PRODNAME> <PROD>5000</SALARY>
</ PRODUCT>
</
PRODUCTDETAILS>
Gambar berikut menunjukkan struktur tree-nya:
PRODUCTDETAILS
PRODUCT PRODUCT
PRODID PRODNAME PRODPRICE PRODID PRODNAME PRODPRICE
Method Contoh Penjelasan
createElemen t(e
lementname)
docobj.createElement(“
PRODUCT”) Membuat element baru
<PRODUCT>…</PROD
RODID”) Membuat atribut<PRODUCT
PRODID=…>… <PROD UCT> createComme
Membuat komentar
createTextNo d
e(text)
docobj.createTextNod e(
“Mini Bus”)
Membuat text untuk node
createNode(ty p
e,name,name
docobj.createNode(“el
em Membuat node
Setiap node tree memiliki nama, tipe dan nilai. Contoh node PRODID, namanya PRODID, tipenya element, nilainya P001.
11.3 DOM Objects
Object-object utama XML DOM untuk mengakses tree adalah:
- Document : untuk mengakses seluruh dokumen XML.
- Element : untuk mengakses elemen
- Node : untuk mengakses node tree.
- NodeList : untuk mengakses beberapa node tree.
- Attr : untuk mengakses node attribute di tree.
- Text : untuk mengakses text dalam element.
- CDataSection : untuk mengakses node CData dalam node tree.
- ParseError : untuk memvalidasi dokumen XML
berdasarkan XSD atau DTD.
11.3.1 Document
Objek Document merupakan object level teratas. Method dan contoh pemakainnya ditunjukkan dalam tabel berikut.
ce-URI)
docobj.createNode(“ele m ent”,
“prod:PRODUCT”,
“
www . ec o m a t c y be r s h o p p e.com/Products”)
docobj.createNode(1, “PRODUCT”, “”) getElementsB
Mengambil semua node
dengan nama tag PRICE
load(XMLdocu
ment) docobj.load(“http://www.ecomatcybershoppe.c om/
products.xml”)
docobj.load(“c:\ products.
Mengambil dokumen xml
loadXML(strin
g) docobj.loadXML(“<?xmlversion=‟1.0‟> <PRODUCTS>
<PRODUCT>
<NAME> Barbie Doll </NAME> </
PRODUCT> </PRODUCTS>”)
Mengambil dokumen XML dari string
transformNod e(
style
sheet object)
docobj.transformNode(“ products.xsl”)
This method takes a style sheet object as its parameter and processes the node by applying the corresponding style sheet
template on the XML document and returns the result of
transformation.
Mengatur format dokumen XML menurut style sheet
appendChild( chi
ld node)
docobj.appendChild(r
oot) Membuat child baru dari
save(destinati
Menyimpan dokumen XML yang ada di RAM ke disk createDocum
Membuat fragment (bagian) dokumen XML
createProcess in
gInstruction( tar get, text)
docobj.createProcess ingIn struction(“XML”, “version=1.0”)
Membuat objek EntityReference
Membuat element di namespace
Membuat atribut di namespace
Mengambil semua elemen
dengan tag yang sama dari
namespace
Objek Document memiliki property, ditunjukkan dalam tabel berikut.
Property Contoh Penjelasan
Async docobj.async = true Jika true, script jalan
terus
meskipun dokumen XML
childNodes var firstelem =
docobj.childNodes.ite m(1
)
Daftar node anak dari
suatu parent node. documentEle
me nt
var
root=docobj.docum entEl ement
Elemen root.
firstChild var
firstelem=docobj.firs tChil d
lastChild var
firstelem=docobj.last child
Anak terakhir
parseError var error =
docobj.parseError
Memberikan object ParseError yang berisi status load dokumen XML
readyState var stateinfo =
docobj.readyS tate if
(stateinfo == 4)
//Document loading //completed
{ :
[perform someaction] : }
Status load mungkin : 1:loading; 2:loaded; 3:interactive; 4:completed.
readyState melihat statusnya ini
xml document.write
(docobj.xml) Menulis isi xml kebrowser
validateOnPar
se docobj.validateOnParse=
true
Jika true, berarti parser
harus
memvalidasi
Biasanya mengakses dokumen XML dengan method dan property object Dokumen sudah cukup. Oleh karena itu,
untuk object-object berikutnya, penjelasan tidak
dilakukan secara rinci.
11.3.2 Element
Object Element menyatakan seluruh node element dalam dokumen. Atribut element dipandang sebagai property, bukan element child. Berikut adalah method-method yang disediakan di object ini.
- getAttribute(attributeName)
- getAttributeNode(attributeName)
- getElementsByTagName(tagName)
- normalize()
- removeAttributeNode(attributeNode)
- setAttribute(attributeName, attributeValue)
- setAttributeNode(attributeNodeName)
- getAttributeNS(namespaceURI, localName)
- setAttributeNS(namespaceURI,
qualifiedname,value)
- removeAttributeNS(namespaceURI, localName)
- getAttributeNodeNS(namespaceURI, localName)
- setAttributeNodeNS(namespaceURI, attribute)
-getElementsByTagNameNS(namespaceURI,localName )
11.3.3 Node
Object node menyatakan suatu node tree. Boleh jadi berupa elemen yang berisi elemen anak. Objek node memiliki method berikut :
- appendChild(newChild)
- insertBefore(newNode, refNode)
- removeChild(nodeName)
- replaceChild(newNode, oldNode)
- hasChildNodes()
- cloneNode(Boolean)
Objek node juga memiliki property berikut:
- nodeName
- nodeType
- nodeValue
- childNodes
- firstChild
- lastChild
- text
- xml
11.3.4 NodeList
Objek NodeList menyediakan daftar node yang ada di tree. Dengan node list, programmer dapat mengakses node
- item(Number)
- nextNode()
Perhatikan kode JavaScript berikut:
myelement=myxmlDoc.getElementsByTa gName("emp"); for(i=0; i<
myelement.length; i++) alert(myelement.ite
m(i).xml);
Kode ini mengambil daftar node dengan nama “emp”, disimpan di variabel “myelement”. Looping for sepanjang “length” selanjutnya menelusuri node dan menampilkan isinya.
Artinya : i++=I ditambah 1 sampe panjang elemen…
11.3.5 Attr
Objek Attr menyatakan “attribute” suatu objek Element. Objek ini mewarisi property dan method objek Node. Hanya, oleh DOM ia tidak dipandang sebagai node anak dari suatu element, tetapi sebagai property.
11.3.6 Text
Objek ini menyatakan text dalam node tree, memiliki method “splitText(number)”, untuk memisahkan text.
11.3.7 CDataSection
Objek ini menyatakan seksi CDATA dalam node tree. Node ini digunakan untuk mengabaikan bagian teks yang
biasanya dikenali sebagai markup.
11.3.8 ParseError
Objek ini memberi informasi tentang error penelusuruan terkini. Objek ini memiliki atribut berikut:
- errorCode
- reason
- line
- linePos
Perhatikan kode berikut:
var prodxml = new
prodxml.async = false; prodxml.load("product.xml");
if (prodxml.parseError.errorCode != 0) { alert("A parse error occurred.");
} else {
alert(prodxml.documentElement.xml); }
Setelah diload, akan diperiksa apakah ada error. Jika “errorCode” bernilai 0 berarti tidak ada kesalahan dalam dokumen XML.
Berikut adalah contoh kode product.xml dan JavaScript yang
mengaksesnya.
<?xml version="1.0"?> <productdetails>
<produ ct>
<prodid>P001</ prodid>
<prodname>Beras</prodname> <price>5000</
price> </
product > <produ
ct>
<prodid>P002</ prodid>
<prodname>Jagung</prodname> <price>6000</
price> </
product > <productdetails>
Kode Javascript berikut digunakan untuk menampilkan rincian setiap karyawan.
<SCRIPT LANGUAGE="JavaScript"> function Navigate() {
//Create an instance of the DOMDocument object. var myxmldoc=new
ActiveXObject("Msxml2.DOMDocument.4.0"); var i;
myxmldoc.async=false;
//Load the XML document. Specify the appropriate path.
myxmldoc.load("product.xml");
if (myxmldoc.readyState == 4 && myxmldoc.parseError.errorCode==0) {
//Store the reference to the root element of the XML //document in the variable “root”
var root=myxmldoc.documentElement; //Traverse through the child nodes of
the root element. for (i=0; i< root.childNodes.length; ++ i) {
//Display the XML code for each child node. alert (root.childNodes.item(i).xml);
} }
//If the XML document contains an error, display an error //
messag e. else {
alert("Failed to load the document. Check whether your XML document is well-formed");
} }
</SCRIPT> </HEAD>
<BODY onload="javascript:Navigate()"> </BODY>
</HTML>
Rangkuman
1. DOM adalah antarmuka pemrograman aplikasi yang mengijinkan aplikasi mengakses dokumen XML.
2. Objek-objek DOM dipakai untuk mengakses dan memanipulasi dokumen XML.
3. MSXML parser membuat struktur tree representasi dokumen XML.
4. Node adalah wadah berisi informasi tentang elemen, atribut, dan isi dokumen XML.
5. Objek DOM berikut digunakan untuk memanipulasi data dalam
