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
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.