tutorial pengembangan web terbaru
 

XML DOM Tutorial


DOM mendefinisikan standar untuk mengakses dan memanipulasi dokumen.

XML DOM menyediakan dokumen XML sebagai struktur pohon.

HTML DOM menyediakan dokumen HTML sebagai struktur pohon.

Memahami DOM adalah suatu keharusan bagi siapa saja yang bekerja dengan HTML atau XML.

XML DOM Pohon Contoh

simpul pohon DOM


Apa DOM?

DOM mendefinisikan standar untuk mengakses dokumen seperti XML dan HTML:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM dipisahkan menjadi 3 berbeda bagian / tingkatan:

  • Core DOM - model standar untuk dokumen terstruktur
  • XML DOM - model standar untuk dokumen XML
  • HTML DOM - model standar untuk dokumen HTML

DOM mendefinisikan objects and properties dari semua elemen dokumen, dan methods (interface) untuk mengaksesnya.


HTML DOM

HTML DOM mendefinisikan sebuah cara standar untuk mengakses dan memanipulasi dokumen HTML.

Semua elemen HTML dapat diakses melalui DOM HTML.

HTML DOM mendefinisikan objects, properties and methods dari semua elemen HTML.


Mengubah Nilai sebuah Elemen HTML

Contoh ini mengubah nilai dari elemen HTML dengan id = "demo":

Contoh

<h1 id="demo">This is a Heading</h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Cobalah sendiri "

Contoh ini mengubah nilai dari pertama <h1> elemen 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>
Cobalah sendiri "

Catatan: Bahkan jika containes dokumen HTML hanya satu <h1> elemen Anda masih harus menentukan indeks array [0], karena getElementsByTagName() metode selalu mengembalikan array.

Anda dapat mempelajari lebih banyak tentang DOM HTML di kami tutorial JavaScript .


XML DOM

XML DOM mendefinisikan sebuah cara standar untuk mengakses dan memanipulasi dokumen XML.

Semua elemen XML dapat diakses melalui DOM XML.

XML DOM mendefinisikan objects, properties and methods dari semua elemen XML.

XML DOM adalah:

  • Sebuah model objek standar untuk XML
  • Sebuah antarmuka pemrograman standar untuk XML
  • Platform-dan bahasa-independen
  • Sebuah standar W3C

Dengan kata lain: The XML DOM is a standard for how to get, change, add, or delete XML elements.


Dapatkan Nilai dari Elemen XML

Kode ini mengambil nilai teks yang pertama <title> elemen dalam dokumen XML:

Contoh

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

Loading file XML

File XML yang digunakan dalam contoh di bawah ini books.xml .

Contoh ini berbunyi "books.xml" ke xmlDoc dan mengambil nilai teks yang pertama <title> elemen dalam books.xml:

Contoh

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    myFunction(xhttp);
    }
};
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>
Cobalah sendiri "

misalnya Dijelaskan

  • xmlDoc - objek XML DOM diciptakan oleh parser.
  • getElementsByTagName("title")[0] - dapatkan pertama <title> elemen
  • childNodes[0] - anak pertama dari <title> elemen (node teks)
  • nodeValue - nilai node (the text itself)

Loading String XML

Contoh ini memuat teks string menjadi objek DOM XML, dan ekstrak info dari 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>
Cobalah sendiri "

Programming interface

Model DOM XML sebagai satu set objek simpul. Node dapat diakses dengan JavaScript atau bahasa pemrograman lain. Dalam tutorial ini kita menggunakan JavaScript.

Antarmuka pemrograman untuk DOM didefinisikan oleh sifat set standar dan metode.

Properties sering disebut sebagai sesuatu yang (yaitu nodename adalah "buku").

Methods yang sering disebut sebagai sesuatu yang dilakukan (yaitu menghapus "buku").


XML DOM Properti

Ini adalah beberapa properti DOM khas:

  • x.nodeName - nama x
  • x.nodeValue - nilai x
  • x.parentNode - node induk x
  • x.childNodes - node anak dari x
  • x.attributes - atribut node x

Catatan: Dalam daftar di atas, x adalah objek simpul.


Metode XML DOM

  • x.getElementsByTagName( name ) - mendapatkan semua elemen dengan nama tag tertentu
  • x.appendChild( node ) - menyisipkan node anak untuk x
  • x.removeChild( node ) - menghapus node anak dari x

Catatan: Dalam daftar di atas, x adalah objek simpul.