Tutorial XML DOM
XML DOM
Apa itu DOMnya?
DOM mendefinisikan standar untuk mengakses dan memanipulasi dokumen:
DOM HTML mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen HTML. Ini menyajikan dokumen HTML sebagai struktur pohon.
XML DOM mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen XML. Ini menyajikan dokumen XML sebagai struktur pohon.
Memahami DOM adalah suatu keharusan bagi siapa saja yang bekerja dengan HTML atau XML.
HTML DOM
Semua elemen HTML dapat diakses melalui DOM HTML.
Contoh ini mengubah nilai elemen HTML dengan id="demo":
Contoh
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Contoh ini mengubah nilai elemen <h1> pertama dalam dokumen HTML:
Contoh
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Catatan: Meskipun dokumen HTML hanya berisi SATU elemen <h1> Anda masih harus menentukan indeks array [0], karena metode getElementsByTagName() selalu mengembalikan array.
Anda dapat mempelajari lebih banyak tentang DOM HTML di tutorial JavaScript kami .
XML DOM
Semua elemen XML dapat diakses melalui XML DOM.
XML DOMnya adalah:
- Model objek standar untuk XML
- Antarmuka pemrograman standar untuk XML
- Platform- dan bahasa-independen
- Standar W3C
Dengan kata lain: XML DOM adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen XML.
Dapatkan Nilai dari Elemen XML
Kode ini mengambil nilai teks dari elemen <title> pertama dalam dokumen XML:
Contoh
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Memuat File XML
File XML yang digunakan dalam contoh di bawah ini adalah books.xml .
Contoh ini membaca "books.xml" ke dalam xmlDoc dan mengambil nilai teks dari elemen <title> pertama di books.xml:
Contoh
<!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>
Contoh Dijelaskan
- xmlDoc - objek XML DOM yang dibuat oleh parser.
- getElementsByTagName("title")[0] - dapatkan elemen <title> pertama
- childNodes[0] - anak pertama dari elemen <title> (node teks)
- nodeValue - nilai node (teks itu sendiri)
Memuat String XML
Contoh ini memuat string teks ke dalam objek XML DOM, dan mengekstrak info darinya dengan JavaScript:
Contoh
<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>
Antarmuka Pemrograman
DOM memodelkan XML sebagai kumpulan objek simpul. Node dapat diakses dengan JavaScript atau bahasa pemrograman lainnya. Dalam tutorial ini kami menggunakan JavaScript.
Antarmuka pemrograman ke DOM ditentukan oleh properti dan metode standar yang ditetapkan.
Properti sering disebut sebagai sesuatu yang ada (yaitu nodename adalah "buku").
Metode sering disebut sebagai sesuatu yang dilakukan (yaitu menghapus "buku").
Properti XML DOM
Ini adalah beberapa properti DOM yang khas:
- x.nodeName - nama x
- x.nodeValue - nilai x
- x.parentNode - simpul induk dari x
- x.childNodes - simpul anak dari x
- x.attributes - node atribut dari x
Catatan: Dalam daftar di atas, x adalah objek simpul.
Metode XML DOM
- x.getElementsByTagName( name ) - dapatkan semua elemen dengan nama tag yang ditentukan
- x.appendChild( node ) - masukkan simpul anak ke x
- x.removeChild( node ) - hapus node anak dari x
Catatan: Dalam daftar di atas, x adalah objek simpul.