tutorial pengembangan web terbaru
 

XML DOM - Menjelajahi Nodes

❮ Sebelumnya Berikutnya Bab ❯

Node bisa dinavigasi menggunakan hubungan simpul.

×

Header

Menjelajahi DOM Nodes

Mengakses node di pohon simpul melalui hubungan antara node, sering disebut "navigating nodes" .

Dalam XML DOM, hubungan simpul didefinisikan sebagai properti untuk node:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Gambar berikut mengilustrasikan bagian dari pohon node dan hubungan antara node di books.xml :

pohon Node

DOM - Node Induk

Semua node memiliki tepat satu orangtua simpul. Kode berikut menavigasi ke node induk <book> :

Contoh

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Cobalah sendiri "

Contoh menjelaskan:

  1. Load " books.xml " ke xmlDoc
  2. Dapatkan pertama <book> elemen
  3. Output nama node dari node induk "x"

Hindari Kosong Nodes Teks

Firefox, dan beberapa browser lain, akan memperlakukan kosong putih-spasi atau baris baru sebagai node teks, Internet Explorer tidak akan.

Hal ini menyebabkan masalah ketika menggunakan properti: firstChild, lastChild, nextSibling, previousSibling.

Untuk menghindari menavigasi ke node teks kosong (spasi dan baru-line karakter antara node elemen), kita 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 ) bukan milik node .nextSibling.

Kode menjelaskan:

node elemen adalah tipe 1. Jika node saudara bukan merupakan simpul elemen, bergerak ke kelenjar berikutnya sampai node elemen ditemukan. Dengan cara ini, hasilnya akan sama di kedua Internet Explorer dan Firefox.

Dapatkan Elemen Anak Pertama

Kode berikut menampilkan node elemen pertama dari pertama <book> :

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;
    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
Cobalah sendiri "

Contoh menjelaskan:

  1. Load " books.xml " ke xmlDoc
  2. Gunakan fungsi get_firstChild pada pertama <book> simpul elemen untuk mendapatkan simpul anak pertama yang merupakan simpul elemen
  3. Output nama node node anak pertama yang merupakan simpul elemen
contoh

Contoh lebih

lastChild()
Contoh ini menggunakan lastChild() metode dan fungsi kustom untuk mendapatkan node anak terakhir dari node

nextSibling()
Contoh ini menggunakan nextSibling() metode dan fungsi kustom untuk mendapatkan node saudara berikutnya node

previousSibling()
Contoh ini menggunakan previousSibling() metode dan fungsi kustom untuk mendapatkan node saudara sebelumnya node


❮ Sebelumnya Berikutnya Bab ❯