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>

Coba sendiri

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>

Coba sendiri

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>

Coba sendiri

Penjelasan contoh

  1. xmlDoc - Objek DOM XML yang dibuat oleh parser
  2. getElementsByTagName("title")[0] - Mendapatkan elemen <title> pertama
  3. childNodes[0] - Anak pertama elemen <title> (node teks)
  4. 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>

Coba sendiri

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 是一个节点对象。