XML

XML : List Node DOM – Contoh dan Codenya

Daftar node dikembalikan oleh metode getElementsByTagName () dan properti childNodes.

List Node DOM

Saat menggunakan properti atau metode seperti childNodes atau getElementsByTagName (), objek daftar node dikembalikan.

Objek daftar node mewakili daftar node, dalam urutan yang sama seperti di XML.

Node dalam daftar node diakses dengan nomor indeks mulai dari 0.

Gambar berikut menunjukkan daftar node dari elemen di “books.xml”:

Misalkan “books.xml” dimuat ke dalam variabel xmlDoc.

Fragmen kode ini mengembalikan daftar node dari elemen judul di “books.xml”:

x = xmlDoc.getElementsByTagName("title");

Setelah eksekusi pernyataan di atas, x adalah objek daftar node.

Fragmen kode berikut mengembalikan teks dari elemen <title> pertama dalam daftar node (x):\

<!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("title");
    document.getElementById("demo").innerHTML =
    x[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

Output :

Everyday Italian

Setelah eksekusi pernyataan di atas, txt = “Everyday Italian”.

Panjang Daftar Node

Objek daftar node selalu up-to-date. Jika sebuah elemen dihapus atau ditambahkan, daftar secara otomatis diperbarui.

Properti length dari daftar node adalah jumlah node dalam daftar.

Fragmen kode ini mengembalikan jumlah elemen dalam “books.xml”:

x = xmlDoc.getElementsByTagName('title').length;

Setelah eksekusi pernyataan di atas, nilai x akan menjadi 4.

Panjang daftar node dapat digunakan untuk mengulang melalui semua elemen dalam daftar.

Fragmen kode ini menggunakan properti length untuk mengulang melalui daftar elemen <title> :

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.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 :

Penjelasan Kode:

  1. Misalkan “books.xml” dimuat ke xmlDoc
  2. Setel variabel x untuk menyimpan daftar simpul dari semua elemen judul
  3. Kumpulkan nilai simpul teks dari elemen <title>

Daftar Atribut DOM (Peta Node Bernama)

Properti atribut dari node elemen mengembalikan daftar node atribut.

Ini disebut peta node bernama dan mirip dengan daftar node, kecuali untuk beberapa perbedaan dalam metode dan properti.

Daftar atribut selalu up-to-date. Jika atribut dihapus atau ditambahkan, daftar secara otomatis diperbarui.

Fragmen kode ini mengembalikan daftar node atribut dari elemen pertama dalam “books.xml”:

x = xmlDoc.getElementsByTagName('book')[0].attributes;

Setelah eksekusi kode di atas, x.length = adalah jumlah atribut dan x.getNamedItem () dapat digunakan untuk mengembalikan simpul atribut.

Fragmen kode ini mendapatkan nilai atribut “kategori” dan jumlah atribut dari sebuah buku:

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, txt, xmlDoc;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("book")[0].attributes;
    txt = x.getNamedItem("category").nodeValue + "<br>" + x.length;
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Output :

Penjelasan Kode :

  1. Misalkan “books.xml” dimuat ke xmlDoc
  2. Setel variabel x untuk menampung daftar semua atribut dari elemen <book> pertama
  3. Dapatkan nilai atribut “category” dan panjang daftar atribut

Hanifah Nurbaeti

Share
Tags: DOMXMLXML DOM