Dengan DOM, kita bisa mengakses setiap node dalam dokumen XML.
Section Artikel
Mengakses Node
Cara mengakses node:
- Dengan menggunakan metode
getElementsByTagName () - Dengan melakukan perulangan (melintasi) node-tree.
- Dengan menavigasi node-tree, menggunakan hubungan simpul.
Metode getElementsByTagName ()
getElementsByTagName () mengembalikan semua elemen dengan nama tag yang ditentukan.
Sintaks
node.getElementsByTagName("tagname");Contoh
Contoh berikut mengembalikan semua elemen <title> di bawah elemen x:
x.getElementsByTagName("title");Perhatikan bahwa contoh di atas hanya mengembalikan elemen <title> di bawah simpul x. Untuk mengembalikan semua elemen <title> dalam dokumen XML gunakan:
xmlDoc.getElementsByTagName("title");di mana xmlDoc adalah dokumen itu sendiri (node dokumen).
Daftar Node DOM
Metode getElementsByTagName () mengembalikan daftar node. Daftar node adalah serangkaian node.
x = xmlDoc.getElementsByTagName("title");Elemen <title> dalam x dapat diakses dengan nomor indeks. Untuk mengakses <title> ketiga kita bisa tulis ::
y = x[2];
Catatan: Indeks dimulai dari 0.
Panjang Daftar Node DOM
Properti length mendefinisikan panjang daftar node (jumlah node).
Kita bisa melakukan perulangan melalui daftar node dengan menggunakan properti length:
Contoh :
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp; 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 x, i, txt, xmlDoc; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("title"); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
Output :
Jenis Node
Properti documentElement dari dokumen XML adalah simpul akar.
Properti nodeName dari sebuah node adalah nama dari node tersebut.
Properti nodeType dari sebuah node adalah tipe dari node tersebut.
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.documentElement.nodeName + "<br>" +
xmlDoc.documentElement.nodeType;
}
</script>
</body>
</html>
Output :
Melintasi Node
Kode berikut mengulang melalui child node yang juga merupakan element node dari root node:
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 x, i, xmlDoc, txt;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.documentElement.childNodes;
for (i = 0; i < x.length; i++) {
if (x[i].nodeType == 1) {
txt += x[i].nodeName + "<br>";
}
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output :
Penjelasan Kode:
- Misalkan kita telah memuat “books.xml” ke xmlDoc
- Dapatkan chld node dari elemen root (xmlDoc)
- Untuk setiap child node, periksa jenis node. Jika jenis node adalah “1” itu adalah node elemen
- Keluarkan nama node jika itu adalah node elemen
Kode berikut menavigasi node-tree menggunakan hubungan simpul:
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 x, y, i, xlen, xmlDoc, txt;
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("book")[0];
xlen = x.childNodes.length;
y = x.firstChild;
txt = "";
for (i = 0; i < xlen; i++) {
if (y.nodeType == 1) {
txt += i + " " + y.nodeName + "<br>";
}
y = y.nextSibling;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output :
Penjelasan Kode :
- Misalkan,kita telah memuat “books.xml” ke xmlDoc
- Dapatkan node turunan dari elemen buku pertama
- Setel variabel “y” menjadi first child node dari elemen buku pertama
- Untuk setiap child node (dimulai dengan first child node “y”):
- Periksa jenis node. Jika jenis node adalah “1” itu adalah node elemen
- Keluarkan nama node jika itu adalah node elemen
- Tetapkan variabel “y” untuk menjadi siblings node berikutnya dan jalankan melalui loop lagi
