XML

XML DOM : Ubah Node Value – Code dan Contohnya

Properti nodeValue digunakan untuk mengubah node value.

Metode setAttribute () digunakan untuk mengubah nilai atribut.

Ubah Nilai Elemen

Di DOM, semuanya adalah node. Node elemen tidak memiliki text value.

Text value dari node elemen disimpan di child node. Node ini disebut text node.

Untuk mengubah nilai teks suatu elemen, kita harus mengubah value dari node teks elemen tersebut.

Ubah Nilai Node Teks

Properti nodeValue dapat digunakan untuk mengubah nilai node teks.

Misalkan “books.xml” telah dimuat ke xmlDoc.

Kode ini mengubah nilai simpul teks dari elemen <title> 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;    
    var txt = "";
    x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    txt += x.nodeValue + "<br>";    
    x.nodeValue = "Easy Cooking";
    x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    txt += x.nodeValue + "<br>";    
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Output :

Penjelasan Kode :

  1. Misalkan “books.xml” dimuat ke xmlDoc
  2. Dapatkan simpul anak pertama dari elemen <title>
  3. Ubah nilai node menjadi “new content”

Ubah Nilai Atribut

Di DOM, atribut adalah node. Tidak seperti node elemen, node atribut memiliki text value.

Cara untuk mengubah nilai atribut adalah dengan mengubah text value nya.

Hal ini bisa dilakukan dengan menggunakan metode setAttribute() atau menyetel properti nodeValue dari node atribut.

Ubah Atribut Menggunakan setAttribute ()

Metode setAttribute () mengubah nilai atribut.

Jika atribut tidak ada, atribut baru dibuat.

Kode ini mengubah atribut kategori dari elemen <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');
    x[0].setAttribute("category","food");
    document.getElementById("demo").innerHTML =
    x[0].getAttribute("category");
}
</script>

</body>
</html>

Penjelasan Kode :

  1. Misalkan “books.xml” dimuat ke xmlDoc
  2. Dapatkan elemen <book> pertama
  3. Ubah nilai atribut “category” menjadi “food”

Catatan: Jika atribut tidak ada, atribut baru dibuat (dengan nama dan nilai ditentukan).

Ubah Atribut Menggunakan nodeValue

Properti nodeValue adalah nilai dari node atribut.

Mengubah properti nilai mengubah nilai atribut.

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]
    var y = x.getAttributeNode("category");
    var txt = y.nodeValue + "<br>";
    y.nodeValue ="food";
    txt += y.nodeValue;
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Output :

Penjelasan Kode :

  1. Misalkan “books.xml” dimuat ke xmlDoc
  2. Dapatkan atribut “category” dari elemen <book> pertama
  3. Ubah nilai node atribut menjadi “food”


Hanifah Nurbaeti

Share
Tags: DOMXMLXML DOM