Panduan DOM XML

Apakah DOM?

DOM menentukan standar untuk mengakses dan mengoperasikan dokumen:

“W3C Document Object Model (DOM) adalah antarmuka yang bebas platform dan bahasa yang memungkinkan program dan skrip mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”

DOM HTML menentukan cara standar untuk mengakses dan mengoperasikan dokumen HTML. Ia mewakili dokumen HTML dalam struktur pohon.

DOM XML menentukan cara standar untuk mengakses dan mengoperasikan dokumen XML. Ia mewakili dokumen XML dalam struktur pohon.

Untuk siapa saja yang menggunakan HTML atau XML, pemahaman DOM adalah penting.

DOM HTML

Semua elemen HTML boleh diakses melalui DOM HTML.

Contoh 1

ini contoh mengubah nilai elemen HTML dengan id="demo":

<h1 id="demo">Ini adalah tajuk</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

Contoh 2

ini contoh mengubah nilai elemen <h1> pertama dalam dokumen HTML:

<h1>Ini adalah tajuk</h1>
<h1>Ini adalah tajuk</h1>
<p id="demo"></p>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

Perhatian:walaupun dokumen HTML hanya mengandung 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
  • Interface pemrograman standar XML
  • tidak bergantung kepada platform dan bahasa
  • Standard W3C

secara lain: XML DOM adalah standar tentang cara mengambil, mengubah, menambah, atau menghapus elemen XML.

mendapatkan nilai elemen XML

ini contoh mencari nilai teks elemen <title> pertama dalam dokumen XML:

Contoh ini mengambil string teks dan memuatnya ke objek DOM XML, dan menggunakan JavaScript untuk mengambil informasi darinya:

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

memuat fail XML

fail XML yang digunakan di contoh ini adalah books.xml.

ini contoh membaca "books.xml" ke xmlDoc dan mencari nilai teks elemen <title> pertama di books.xml:

Contoh ini mengambil string teks dan memuatnya ke objek DOM XML, dan menggunakan JavaScript untuk mengambil informasi darinya:

<!DOCTYPE html>
实例
<html>
<body>
<p id="demo"></p>
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;
    xmlDoc = parser.parseFromString(text,"text/xml");
    document.getElementById("demo").innerHTML =
}
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

}

  1. 例子解释 xmlDoc
  2. - Objek DOM XML yang dibuat oleh parser getElementsByTagName("title")[0]
  3. - Mendapatkan elemen <title> pertama childNodes[0]
  4. - Anak hala pertama elemen <title> (hala teks) nodeValue

- Nilai hala (teks sendiri)

Muat String XML

Contoh ini mengambil string teks dan memuatnya ke objek DOM XML, dan menggunakan JavaScript untuk mengambil informasi darinya:

实例
<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

Antarmuka Pemrograman

DOM menggambarkan XML sebagai sekumpulan objek hala. Objek hala dapat diakses menggunakan JavaScript atau bahasa pemrograman lain. Dalam tutorial ini, kami menggunakan JavaScript.

PropertiBiasanya merujuk kepada apa hal itu (contohnya nodename adalah "book").

MethodBiasanya merujuk kepada apa yang dapat dilakukan (contohnya menghapus gerakan "book" ini).

Properti XML DOM

Berikut adalah beberapa properti DOM yang biasa:

  • x.nodeName - Nama hala x
  • x.nodeValue - Nama hala x
  • x.parentNode - Bapa hala x
  • x.childNodes - Anak hala x
  • x.attributes - Hala sifat x

注释：Dalam senarai di atas, x adalah objek hala.

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。