XML

XML DOM – Mengakses Node – Code dan Contohnya

Dengan DOM, kita bisa mengakses setiap node dalam dokumen XML.

Mengakses Node

Cara mengakses node:

  1. Dengan menggunakan metode getElementsByTagName ()
  2. Dengan melakukan perulangan (melintasi) node-tree.
  3. 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:

  1. Misalkan kita telah memuat “books.xml” ke xmlDoc
  2. Dapatkan chld node dari elemen root (xmlDoc)
  3. Untuk setiap child node, periksa jenis node. Jika jenis node adalah “1” itu adalah node elemen
  4. Keluarkan nama node jika itu adalah node elemen

Menavigasi Hubungan Node

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 :

  1. Misalkan,kita telah memuat “books.xml” ke xmlDoc
  2. Dapatkan node turunan dari elemen buku pertama
  3. Setel variabel “y” menjadi first child node dari elemen buku pertama
  4. Untuk setiap child node (dimulai dengan first child node “y”):
  5. Periksa jenis node. Jika jenis node adalah “1” itu adalah node elemen
  6. Keluarkan nama node jika itu adalah node elemen
  7. Tetapkan variabel “y” untuk menjadi siblings node berikutnya dan jalankan melalui loop lagi

Hanifah Nurbaeti

Share
Tags: DOMXMLXML DOM