XML DOM - Menavigasi Node
Node dapat dinavigasi menggunakan hubungan node.
Menavigasi DOM Node
Mengakses node di pohon node melalui hubungan antar node, sering disebut "navigasi node".
Dalam XML DOM, hubungan simpul didefinisikan sebagai properti ke simpul:
- parentNode
- anakNode
- anak pertama
- anak terakhir
- saudara berikutnya
- saudara sebelumnya
Gambar berikut mengilustrasikan bagian dari pohon simpul dan hubungan antar simpul di books.xml :
DOM - Node Induk
Semua node memiliki tepat satu node induk. Kode berikut menavigasi ke simpul induk <book>:
Contoh
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Contoh menjelaskan:
- Muat " books.xml " ke dalam xmlDoc
- Dapatkan elemen <book> pertama
- Keluarkan nama simpul dari simpul induk "x"
Hindari Node Teks Kosong
Firefox, dan beberapa peramban lain, akan memperlakukan spasi kosong atau baris baru sebagai simpul teks, sedangkan Internet Explorer tidak.
Ini menyebabkan masalah saat menggunakan properti: firstChild, lastChild, nextSibling, PreviousSibling.
Untuk menghindari navigasi ke node teks kosong (spasi dan karakter baris baru di antara node elemen), kami menggunakan fungsi yang memeriksa jenis node:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
Fungsi di atas memungkinkan Anda untuk menggunakan get_nextSibling( node ) alih-alih properti node .nextSibling.
Kode menjelaskan:
Node elemen adalah tipe 1. Jika simpul saudara bukan simpul elemen, ia pindah ke simpul berikutnya sampai simpul elemen ditemukan. Dengan cara ini, hasilnya akan sama di Internet Explorer dan Firefox.
Dapatkan Elemen Anak Pertama
Kode berikut menampilkan simpul elemen pertama dari <book> pertama:
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;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Keluaran:
title
Contoh menjelaskan:
- Muat " books.xml " ke dalam xmlDoc
- Gunakan fungsi get_firstChild pada simpul elemen <book> pertama untuk mendapatkan simpul anak pertama yang merupakan simpul elemen
- Keluarkan nama simpul dari simpul anak pertama yang merupakan simpul elemen
Lebih Banyak Contoh
Contoh ini menggunakan metode lastChild() dan fungsi kustom untuk mendapatkan node anak terakhir dari sebuah node
Contoh ini menggunakan metode nextSibling() dan fungsi khusus untuk mendapatkan node saudara berikutnya dari sebuah node
Contoh ini menggunakan metode PreviousSibling() dan fungsi kustom untuk mendapatkan node saudara sebelumnya dari sebuah node