Pemahaman tentang XML Document Object Model, Pengenalan DOM Struktur Dokumen XML XML DOM Object dan Method Contoh Penggunaan XML DOM

1. BAB V XML DOM
Riza Muhammad Nurman, S.Kom
Email : rizaman@eng.ui.ac.id ; rizamn@ymail.com

2. Sunday, April 22, 2018 Riza Muhammad Nurman 2
CONTENT
 Pengenalan DOM
 Struktur Dokumen XML
 XML DOM Object dan Method
 Contoh Penggunaan XML DOM

3. Sunday, April 22, 2018 Riza Muhammad Nurman 3
Document Object Model
• Digunakan untuk mendefinisikan struktur logika dari sebuah dokumen
dan bagaimana cara sebuah dokumen dapat diakses dan dimanipulasi
• DOM mendefinisikan struktur pohon secara logika dari sebuah
dokumen XML. Komponen dasar pembentuk struktur pohon tersebut
adalah node
• Untuk dapat menggunakan fitur dari XML, DOM menggunakan sebuah
DOM-enabled parser
Contoh :
– MSXML Parser

4. Sunday, April 22, 2018 Riza Muhammad Nurman 4
Struktur Dokumen XML

5. Sunday, April 22, 2018 Riza Muhammad Nurman 5
XML DOM Object dan Method
• Document object
• Element object
• Node object
• NodeList object
• Attr object
• Text object
• CDataSection
• ParseError

6. Sunday, April 22, 2018 Riza Muhammad Nurman 6
Method - Document Object
METHOD DESKRIPSI CONTOH
createElement(element name)
Method ini menggunakan sebuah parameter yang
merupakan nama sebuah elemen dan membuat
sebuah element node yang sesuai dengan nama
elemen tersebut.
docobj.createElement("Product")
createAttribute(attribute ename)
Method ini menggunakan sebuah parameter yang
merupakan nama sebuah atribut dan membuat
sebuah attribute node yang sesuai dengan nama
atribut tersebut.
docobj.createAttribute("ProdID")
createComment(text)
Method ini menggunakan string sebagai
parameter dan membuat sebuah komentar yang
sesuai dengan string tersebut
docobj.createComment("Ini adalah sebuah
Dokumen XML")
createTextNode(text)
Method ini menggunakan string sebagai
parameter dan membuat sebuah text node yang
berisi string tersebut
docobj.createTextNode("Mini Bus")
createNode(type, name,
namespace-URI)
Method ini menggunakan tiga parameter.
Parameter type adalah tipe yang dapat berisi nilai
string atau integer. Parameter kedua adalah
string yang mewakili nama dari node yang akan
dibuat. Parameter ketiga adalah sebuah string
yang mewakili namespace-URI.
docobj.createNode("element", "Product", "")
docobj.createNode("element", "prod:Product",
"www.ccit.com/Product")
docobj.createNode(1,"Products", "") dengan
angka 1 mewakili tipe node sebagai elemen

7. Sunday, April 22, 2018 Riza Muhammad Nurman 7
Method - Document Object
METHOD DESKRIPSI CONTOH
getElementsByTagName
(elementName)
Method ini menggunakan sebuah string sebagai
parameter. String tersebut mewakili elemen yang akan
dicari. Method ini menghasilkan object NodeList yang berisi
sekumpulan node dengan nama elemen yang sesuai
dengan parameter. NodeList untuk melakukan navigasi
dan memanipulasi nilai yang tersimpan dalam nama
elemen tersebut
docobj.getElementsByTagName("Price“)
load(XMLdocument)
Method ini menggunakan string sebagai parameter yang
mewakili URL atau lokasi dari dokumen XML dan
mengisikan dokumen XML tersebut dalam object
Document
docobj.load("http://www.ccit.com/product.xml")
docobj.load("c:/product.xml")
loadXML(string)
Method ini menggunakan sebuah parameter berupa string
yang berisi dokumen XML yang telah well formed dan
mengisikannya ke dalam object Document
docobj.loadXML("<?xml version='1.0'">
<products>
<product><name>Barbie Doll</name>
</product>
</products>”)
transformNode(style sheet
object)
Method ini menggunakan sebuah object style sheet
sebagai parameter dam memproses node dengan
mengaplikasikan style sheet yang sesuai pada dokumen
XML dan menghasilkan hasil dari transformasi tersebut
docobc.transformNode("product.xsl')
appendChild(child node)
Method ini menggunakan sebuah object sebagai parameter
dan menambahkan object tersebut sebagai child node
terakhir. Method createNode() dan createElement()
digunakan untuk mebuat node atau element namun tidak
menambahkannya kedalam tree. Untuk menambahkan
node atau elemen yang baru saja dibuat dengan kedua
method tersebut, perlu digunakan salah satu dari fungsi
berikut:appendChild(), insertBefore(), atau replaceChild().
docobj.appendChild(root)
dalam hal ini root adalah nama elemen atau node
yang telah dibuat dengan menggunakan
createNode() ataupun createElement()

8. Sunday, April 22, 2018 Riza Muhammad Nurman 8
Method - Document Object
METHOD DESKRIPSI CONTOH
save(destination)
Method ini menggunakan sebuah object
sebagai parameter. Object tersebut dapat
merupakan sebuah dokumen ataupun sebuah
nama file. Method ini digunakan untuk
menyimpan object Document pada
tempat/tujuan tertentu
docobj.save("http://ccit.com/product.xml")
createProcessingInstruction
(target, text)
Method ini membuat sebuah processing
instruction node yang berisi target dan text
tertentu
docobj.createProcessingInstruction
("XML","version=1.0")
createEntityReference
(reference name)
Method ini membuat sebuah object
entityReference dengan nama referensi yang
ditentukan pada parameter
docobj.createEntityReference
("newref")
createElementNS
(namespacesURI, qualifiedname)
Method ini membuat sebuah element node
dalam namespace dan qualified name yang
ditentukan dalam parameternya.
docobj.createElementNS('http://www.ccit.com/element','
NewE')
createAttributeNS
(namespacesURI, qualifiedname)
Method ini membuat sebuah attribute node
dalam namespace dan qualified name yang
ditentukan dalam parameternya.
docobj.createAttributeNS('http://www.ccit.com/element','
NewA')
getElementsByTagNameNS
()
Method ini menghasilkan elemen tertentu dari
sebuah dokumen berdasarkan namespace
dan qualified name yang disebutkan
docobj.getElementByTagNameNS('http://www.ccit.com/
element','apply')

9. Sunday, April 22, 2018 Riza Muhammad Nurman 9
Properti Document Object
PROPERTI DESKRIPSI CONTOH
Sync
Properti ini digunakan untuk menentukan
apakah synchronous download diperbolehkan
atau tidak. Properti ini menggunakan nilai
Boolean. Jika nilainya adalah true, maka script
tersebut akan terus melakukan eksekusi ketika
dokumen XML masih dibaca. Jika nilainya
adalah false, maka script tersebut akan
menunggu sampai dokumen XML selesai
dibaca, baru kemudian melanjutkan eksekusi
perintah yang lain. Secara umum, perintah ini
harus diatur menjadi nilai false, karena
mengijinkan asynchronous download dapat
menghasilkan error pada saat mengesekusi
sebuah perintah.
docobj.async=false
childNodes
Properti ini menghasilkan daftar dari child node
yang dimiliki oleh sebuah parent node. Nilai
dari properti ini adalah nodeList type
var firstElem=docobj.childNodes.item(1)
documentElement
properti ini berisi root element dari dokumen
XML yang direpresentasikan oleh object
document
var root= docobj.documentElement
firstChild
Properti ini menghasilkan first child dari sebuah
parent node. Properti ini adalah read-only
property.
var firstElem=docobj.firstChild

10. Sunday, April 22, 2018 Riza Muhammad Nurman 10
Properti Document Object
PROPERTI DESKRIPSI CONTOH
lastChild
Properti ini menghasilkan last child dari sebuah
parent node. var firstElem=docobj.lastChild
parseError
Properti ini menghasilkan object ParseError
yang berisi informasi tentang error yang baru
saja terjadi. var error =docobj.parseError
readyState
Properti ini menghasilkan status dari dokumen
XML. Status tersebut menandakan apakah
sebuah dokumen XML telah selesai dibaca.
Nilai dari properti ini adalah loading, loaded,
interactive dan completed, yang
direpresentasikan dalam bentuk angka
1,2,3,dan 4
var stateInfo=docobj.readyState
if (stateinfo==4)//Document loading complete{
:
[aksi tertentu]
:
}
xml
Properti ini menghasilkan sebuah representasi
XML dari node dan child node
document.write(docobj.xml
menghasilkan bentuk XML dari node ke dalam browser
validateOnParse
Properti ini menentukan apakah sebuah parser
harus memvalidasi sebuah dokumen XML
pada saat diparsing docobj.validateOnParse=true

11. Sunday, April 22, 2018 Riza Muhammad Nurman 11
Method – Element Object
METHOD DESKRIPSI CONTOH
getAttribute(attibuteName)
Menghasilkan nilai string dari atribut yang
disebutkan
var1=Country.getAttribute("State")
dengan Country adalah nama elemen dan State
adalah atribute dimilikinya
getAttributeNode
(attributeName)
Menghasilkan attribute node yang disebutkan
sebagai object dan bukan string
var1=Country.getAttributeNode("State")
dengan Country adalah nama elemen dan State
adalah atribute dimilikinya
getElementsByTagName
(tagName)
Menghasilkan node yang disebutkan dan
seluruh child node sebagai node list
elementsObj.getElementsByTagName("Price")
Normalize()
Meletakkan text node untuk elemen yang
disebutkan dan juga seluruh child node
menjadi satu text node tetapi tidak
menghasilkan apapun
elem.normalize()
removeAttributte
(attributeName)
Menghapus atribut yang ditentukan pada
parameter
elem.removeAttibute("category")

12. Sunday, April 22, 2018 Riza Muhammad Nurman 12
Method – Element Object
METHOD DESKRIPSI CONTOH
removeAttributteNode
(attributeName)
Menghapus attributte node yang ditentukan
pada parameter
elem.removeAttibute("thenode")
setAttribute(attributeName,
attributeValue)
Menambahkan sebuah atribut baru elem.setAtribute("attr","new")
setAttributeNode(attributeNode name) Menambahkan sebuah attribute node baru elem.setAtributeNode(attributeNode)
getAttributeNs(namespaces-URI,
localname)
Menghasilkan atribut yang diinginkan
berdasarkan namespace dan local name
divvy.getAttributeNS("www.ccit.com/Products","attr")
setAttributeNs(namespaces-URI,
qualifiedName, value)
Menambahkan nilai dari sebuah atribut pada
namespace dan qualified name tertentu
elem.setAttributeNS("www.ccit.com/Product,"attr",
"val")
removeAttributeNs(namespaces-
URI,qualifiedName)
Menghapus attribute node untuk elemen
tertentu berdasarkan namespace dan local
name
elem.removeAttributeNS("www.ccit.com/Product","att
r")
getAttributeNs(namespaces-
URI,qualifiedName)
Menghasilkan attribute node yang dimiliki oleh
elemen yang ditentukan berdasarkan
namespace dan local name
elem.getAttributeNodeNS("www.ccit.com/Product","at
trNode")
setAttributeNs(namespaces-
URI,attribute)
Menambahkan atttribute node baru
berdasarkan namespaces dan atribut
elem.setAttributeNodeNS("www.ccit.com/Product","at
tr")
getElementsByTagNamesNs(namespace
s-URI,localname)
menghasilkan sebuah node list yang berisi
seluruh sub elemen dari sebuah elemen yang
disebutkan pada namespace dan local name
elem.getElementsByTagNamesNS(www.ccit.com/Pro
ducts","TagName")

13. Sunday, April 22, 2018 Riza Muhammad Nurman 13
Method – Node Object
METHOD DESKRIPSI CONTOH
appendChild(newChild)
Menambahkan node new
child pada posisi terakhir dari
urutan child node.
nodeobj.appendChild(newElement)
insertBefore(newNode, refNode)
Menambhakan sebuah node
baru pada posisi sebelum
node yang disebutkan
sebagai ref node
nodeobj.insertBefore(newNode,
root.childNodes.item(2))
removeChild(nodeName)
Menghapus node yang
disebutkan
nodeobj.removeChild(objRoot.childNodes.item(
2))
replaceChild(newNode, oldNode)
Menggantikan node yang
tertulis sebagai oldNode
dengan newNode
nodeobj.replaceChild(newNode,
root.childNodes.item(1))
hasChildNode()
Method ini akan
menghasilkan nilai tru jiha
node object memiliki child
node dan menghasilkan false
jika node object tidak
memiliki child node
if n.hasChildNodes
then
set n=n.firstChild

14. Sunday, April 22, 2018 Riza Muhammad Nurman 14
Properti – Node Object
PROPERTI DESKRIPSI CONTOH
nodeName Menghasilkan nama dari node document.write(objNode.nodeName)
nodeType Menghasilkan tipe dari node document.write(n.nodetype)
nodeValue
Menghasilkan teks yang terdapat di
dalam node
document.write(objNode.nodeValue)
childNodes
Menghasilkan sekelompok child node
dari node yang diwakili oleh node
object
objChildNodes=objXMLDoc.documentElement.c
hildNodes
firstChild
Menghasilkan child node dengan posisi
teratas
var
f_child=xml_doc.documentElement.firstChild.tex
t
lastChild
Menghasilkan child node dengan posisi
terakhir
var
l_child=xml_doc.documentElement.lastChild.text
text
Menghasilkan nilai teks yang terdapat
pada node object
alert(myelement.text)
xml
Menghasilkan bentuk xml dari sebuah
node object
document.write("product.xml")

15. Sunday, April 22, 2018 Riza Muhammad Nurman 15
Method NodeList Object
METHOD DESKRIPSI CONTOH
item(number)
Method ini
menghasilkan node
yang posisinya tertulis
pada parameter
var output1=NodeList.item(2).firstChild.nodeValue
nextNode()
Method ini
menghasilkan node
selanjutnya dari node
yang berada di dalam
daftar
currNode=NodeList.nextNode()

16. Sunday, April 22, 2018 Riza Muhammad Nurman 16
ATTR dan TEXT
ATTR OBJECT
• Attribute object mewakili sebuah atribut dari sebuah object elemen.
• Nilai yang diperbolehkan dari sebuah attr object biasanya ditentukan
melalui DTD.
• Object attr juga merupakan sebuah node dan oleh karena itu merupakan
turunan dari dari node object, sehingga juga memiliki property dan method
yang sama dengan node object.
• Sebuah atribut tidak dianggap sebagai child node dari sebuah elemen
pada DOM tetapi dianggap sebagai properti.
TEXT OBJECT
• Object ini mewakili teks yang terdapat di dalam elemen dari sebuah XML di
dalam node tree.
METHOD DESKRIPSI CONTOH
splitText(number)
Membagi teks pada karakter
yang telah ditentukan dan
menghasilkan sisa dari teks
tersebut
text.splitText(4)

17. Sunday, April 22, 2018 Riza Muhammad Nurman 17
CDATASECTION dan PARSEERROR
CDATASECTION OBJECT
• Object ini mewakili bagian CData pada sebuah node tree.
• CDataSection Node digunakan untuk mengabaikan bagian dari teks
yang biasanya akan dikenali sebagai markup.
PARSEERROR OBJECT
• ParseError object menghasilkan informasi tentang error yang baru saja
terjadi.
PROPERTY DESKRIPSI
errorCode
Properti ini error code dalam bentuk nilai long integer. Jika tidak terjadi error maka
properti ini akan bernilai 0
reason Properti ini berisi string yang menjelaskan alasan terjadinya error
line
Properti ini berisi niai long integer yang menunjukkan baris yang menyebabkan
terjadinya error
linePos Properti ini menyimpan nilai long integer yang mewakili posisi dari error yang terjadi
srcText Properti ini menyimpan string yang berisi baris yang menghasilkan error

18. Sunday, April 22, 2018 Riza Muhammad Nurman 18
CONTOH PENGGUNAAN XML DOM