Panduan DOM XML
Apa itu DOM?
DOM mendefinisikan standar untuk mengakses dan mengoperasikan dokumen:
“W3C Document Object Model (DOM) adalah sebuah antarmuka yang bebas platform dan bahasa, yang memungkinkan program dan skrip mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”
DOM HTML mendefinisikan metode standar untuk mengakses dan mengoperasikan dokumen HTML. Ini menampilkan dokumen HTML dalam struktur pohon.
DOM XML mendefinisikan metode standar untuk mengakses dan mengoperasikan dokumen XML. Ini menampilkan dokumen XML dalam struktur pohon.
Bagi siapa pun yang menggunakan HTML atau XML, memahami DOM adalah penting.
DOM HTML
Semua elemen HTML dapat diakses melalui DOM HTML.
Contoh 1
Contoh ini mengubah nilai elemen HTML dengan id="demo":
<h1 id="demo">Ini adalah judul</h1> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script>
Contoh 2
Contoh ini mengubah nilai elemen <h1> pertama dalam dokumen HTML:
<h1>Ini adalah judul</h1> <h1>Ini adalah judul</h1> <script> document.getElementsByTagName("h1")[0].innerHTML = "Hello World!"; </script>
Perhatian:Meskipun dokumen HTML hanya berisi satu elemen <h1>, Anda masih harus menentukan indeks array [0], karena metode getElementsByTagName() selalu mengembalikan array.
Anda dapat belajar lebih banyak tentang HTML DOM di tutorial JavaScript kami.
DOM XML
Semua elemen XML dapat diakses melalui XML DOM.
XML DOM adalah:
- Model objek standar XML
- Antarmuka pemrograman standar XML
- Tidak bergantung dari platform dan bahasa
- Standar W3C
Artinya: XML DOM adalah standar tentang bagaimana mengambil, mengubah, menambah, atau menghapus elemen XML.
Ambil nilai elemen XML
Contoh ini mencari nilai teks elemen <title> pertama dalam dokumen XML:
Contoh
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Muat berkas XML
Berkas XML yang digunakan di contoh ini adalah books.xml.
Contoh ini membaca "books.xml" ke xmlDoc dan mencari nilai teks 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>
Penjelasan contoh
xmlDoc
- Objek DOM XML yang dibuat oleh parsergetElementsByTagName("title")[0]
- Mendapatkan elemen <title> pertamachildNodes[0]
- Anak pertama elemen <title> (node teks)nodeValue
- Nilai node (teks itu sendiri)
Muat string XML
Contoh ini mengisi string teks ke objek DOM XML dan menggunakan JavaScript untuk mengekstrak informasi dari dalamnya:
Contoh
<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>
Interface pemrograman
DOM memodelkan XML menjadi sekumpulan objek node. Node dapat diakses menggunakan JavaScript atau bahasa pemrograman lain. Dalam tutorial ini, kita menggunakan JavaScript.
Interface pemrograman DOM ditentukan oleh sekumpulan properti dan method standar.
PropertiBiasanya mengacu pada apa hal itu (seperti nodename adalah "book").
MethodBiasanya mengacu pada apa yang dapat dilakukan (seperti menghapus gerakan "book" ini).
Properti XML DOM
Berikut adalah properti DOM yang biasa:
- x.nodeName - Nama x
- x.nodeValue - Nilai x
- x.parentNode - Node orang tua x
- x.childNodes - Anak node x
- x.attributes - Properti node x
注释:Dalam daftar di atas, x adalah objek node.
XML DOM 方法
- x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
- x.appendChild(node) - 向 x 插入一个子节点
- x.removeChild(node) - 从 x 中删除子节点
注释:在上面的列表中,x
是一个节点对象。