Section Artikel
Apa DOM itu?
DOM menetapkan standar untuk mengakses dan memanipulasi dokumen:
“Model Objek Dokumen (DOM) W3C adalah platform dan antarmuka tanpa bahasa yang memungkinkan program dan skrip mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”
HTML DOM mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen HTML. HTML DOM menyajikan dokumen HTML sebagai struktur pohon.
XML DOM mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen XML. XML DOM menyajikan dokumen XML sebagai struktur pohon.
Memahami DOM adalah suatu keharusan bagi siapa pun yang bekerja dengan HTML atau XML.
DOM HTML
Semua elemen HTML dapat diakses melalui DOM HTML.
Kali ini kita akan gunakan contoh mengubah nilai elemen HTML dengan id = “demo”:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">Heading 1</h1>
<p>Paragraph.</p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
Contoh ini mengubah nilai elemen <h1> pertama dalam dokumen HTML:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h1>Ini heading</h1>
<p>Ini paragraph.</p>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
</body>
</html>
Catatan: Meskipun dokumen HTML hanya berisi SATU elemen <h1> kitamasih harus menentukan indeks array [0], karena metode getElementsByTagName () selalu mengembalikan array.
XML DOM
Semua elemen XML dapat diakses melalui XML DOM.
XML DOM adalah:
- Model objek standar untuk XML
- Antarmuka pemrograman standar untuk XML
- Platform- dan bahasa-independen
- Standar W3C(World Wibe Web Consortium)
Dengan kata lain: XML DOM adalah standar untuk cara mendapatkan, mengubah, menambah, atau menghapus elemen XML.
Dapatkan Nilai dari sebuah 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 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>
Output :
Penjelasan Kode :
- xmlDoc – objek XML DOM yang dibuat oleh parser.
- getElementsByTagName (“title”) [0] – dapatkan elemen <title> pertama
- childNodes [0] – anak pertama dari elemen <title> (simpul 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 :
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var parser, xmlDoc;
var 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>
Output :
Antarmuka Pemrograman
DOM memodelkan XML sebagai sekumpulan objek node. Node dapat diakses dengan JavaScript atau bahasa pemrograman lainnya. Dalam tutorial ini kita akan gunakan JavaScript.
Antarmuka pemrograman ke DOM ditentukan oleh seperangkat properti dan metode standar.
Properti sering disebut sebagai sesuatu (yaitu nama node adalah “book”).
Metode sering disebut sebagai sesuatu yang dilakukan (yaitu menghapus “book”).
Properti XML DOM
Ini adalah beberapa properti DOM tipikal:
x.nodeName– nama xx.nodeValue– nilai xx.parentNode– parent node dari xx.childNodes– child node dari xx.attributes– atribut node dari x
Catatan: Dalam daftar di atas, x adalah objek node
Metode XML DOM
x.getElementsByTagName(nama) – dapatkan semua elemen dengan nama tag yang ditentukanx.appendChild(node) – masukkan child node ke xx.removeChild(node) – menghapus child node dari x
Catatan: Dalam daftar di atas, x adalah objek node
