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 untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”
HTML DOM mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen HTML. DOM ini menyajikan dokumen HTML sebagai struktur pohon.
XML DOM mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen XML. DOM ini 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.
Contoh ini mengubah nilai elemen HTML dengan id = “demo”:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">This is a Heading</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>
</body>
</html>
XML DOM
Semua elemen XML dapat diakses melalui XML DOM.
Books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>Kode ini mengambil nilai teks dari elemen <title> pertama dalam dokumen XML:
Contoh :
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;XML DOM adalah standar untuk cara mendapatkan, mengubah, menambah, dan menghapus elemen 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>
