XML

XML DOM: Navigate Node – Cara dan Contoh Kodenya

Node dapat dinavigasi menggunakan hubungan node.

Menavigasi Node DOM

Mengakses node dalam node-tree melalui hubungan antar node, sering disebut “navigating node”.

Di XML DOM, hubungan node didefinisikan sebagai properti ke node:

  • parentNode
  • childNodes
  • anak pertama
  • anak terakhir
  • nextSibling
  • PreviousSibling

Gambar berikut mengilustrasikan bagian dari node-tree dan hubungan antar node di books.xml:

DOM – Parent Node

Semua node memiliki tepat satu node induk(parent node). Kode berikut menavigasi ke parent node <book> :

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 = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
</script>
</body>
</html>

Output :

Penjelasan Kode :

  1. Muat “books.xml” ke xmlDoc
  2. Dapatkan elemen <book> pertama
  3. Keluarkan nama node dari node induk “x”

Hindari Node Teks Kosong

Firefox dan beberapa browser lain akan memperlakukan ruang kosong atau baris baru sebagai node teks, Internet Explorer tidak. Hal ini menyebabkan masalah saat menggunakan properti: firstChild, lastChild, nextSibling, previousSibling.

Untuk menghindari navigasi ke node teks kosong (spasi dan karakter baris baru antara node elemen), kita akan gunakan 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 kita untuk menggunakan get_nextSibling (node) daripada properti node.nextSibling.

Penjelasan Kode:

Node elemen adalah tipe 1. Jika sibling node bukan simpul elemen, ia pindah ke simpul berikutnya sampai node elemen ditemukan. Dengan cara ini, hasilnya akan sama di Internet Explorer dan Firefox.

Dapatkan Elemen First Child

Kode berikut menampilkan node 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>

Output :

Penjelasan Kode :

  1. Muat “books.xml” ke xmlDoc
  2. Gunakan fungsi get_firstChild pada simpul elemen <book> pertama untuk mendapatkan first child node yang merupakan simpul elemen
  3. Keluarkan node name dari fist child node yang merupakan node elemen

Contoh Lain

lastChild()

<!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_lastChild(xmlDoc.getElementsByTagName("book")[0]);
    document.getElementById("demo").innerHTML =
    x.nodeName;
}

function get_lastChild(n) {
    var y = n.lastChild;
    while (y.nodeType!=1) {
        y = y.previousSibling;
    }
    return y;
}
</script>

</body>
</html>

Output :

nextSibling()

<!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_nextSibling(xmlDoc.getElementsByTagName("title")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}

function get_nextSibling(n) {
    var y = n.nextSibling;
    //check if the node is an element node
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>

</body>
</html>

Output :

previousSibling()

<!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_previousSibling(xmlDoc.getElementsByTagName("price")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}

function get_previousSibling(n) {
    var y = n.previousSibling;
    //check if the node is an element node
    while (y.nodeType != 1) {
        y = y.previousSibling;
    }
    return y;
}
</script>

</body>
</html>

Output :


Hanifah Nurbaeti

Share
Tags: DOMXMLXML DOM