XML DOM Change Node Values

To change a node value, the nodeValue property is used, while, to change the value of an attribute, the setAttribute() method is used.

Change the Value of an Element:

Everything in the DOM is a node. There is no text value in the element nodes. It is stored in a child node, also called a text node. The value of the elements’ text node is required to be changed to change the text value of the element.

Change the Value of a Text Node:

To change the value of a text node, the nodeValue property is used.

Books.xml:

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
 
  <book category="Child">
    <title lang="en">ABC</title>
    <author>Author Name</author>
    <year>2020</year>
    <price>100.00</price>
  </book>
 
  <book category="IT">
    <title lang="en">XQuery Book</title>
    <author>Author 1</author>
    <author>Author 2</author>
    <author>Author 3</author>
    <author>Author 4</author>
    <year>2004</year>
    <price>350.00</price>
  </book>
 
</bookstore>

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></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 = "Alphabets";
    x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    txt += x.nodeValue + "<br>";    
    document.getElementById("hello").innerHTML = txt;
}
</script>
</body>
</html>

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc to change the text node value of the first <title> element.

Example: To loop through and change the text node of all <title> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello1"></p>
<p id="hello2"></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, attnode, 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("hello1").innerHTML = txt; 
     for (i = 0; i < x.length; i++) {
         x[i].childNodes[0].nodeValue = "---";
    }
    txt = ""; 
    for (i = 0; i < x.length; i++) { 
        txt += x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("hello2").innerHTML = txt;
 }
</script>
</body>
</html>

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc to change the text node value of all the <title> elements.

Change the Value of an Attribute:

Attributes in a DOM are nodes. The attribute nodes, however, have text values, unlike the element nodes. Thus, to change the text value of an attribute node, we have to change its value using either of the two methods:

  • Using the setAttribute() method
  • Setting the nodeValue property of the attribute node.

Change an Attribute Using the setAttribute() method:

To change the value of an attribute, we can use the setAttribute() method, which creates a new attribute, in case the attribute does not exist.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></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","Children");
    document.getElementById("hello").innerHTML =
    x[0].getAttribute("category");
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are changing the category attribute of the <book> element. Here, we are loading the “books.xml” in the xmlDoc to get the first <book> element. We are then changing the “category” attribute value. In case, the attribute does not exist a new attribute is created with the specified name and value.

Example: To loop through all <title> elements and to add a new attribute:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></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');
    // Add a new attribute to each title element
    for (i = 0; i < x.length; i++) { 
        x[i].setAttribute("publisher","Publisher Name");    
    }
    // Output title and edition value
    for (i = 0; i < x.length; i++) { 
        txt += x[i].childNodes[0].nodeValue + 
        " - Publisher: " + 
        x[i].getAttribute('publisher') + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Explanation:

In the above example, we are loading the “books.xml” in the xmlDoc to get all the <title> elements. We are then adding a new attribute to each of them.

Change an Attribute Using nodeValue:

The value of an attribute node can be retrieved by using the nodeValue property. The value of the attribute changes if we change the value property.

Example:

 <!DOCTYPE html>
<html>
<body>
 
<p id="hello"></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 ="Children";
    txt += y.nodeValue;
    document.getElementById("hello").innerHTML = txt;
}
</script>
</body>
</html>

Explanation:

In the above example, we are loading the “books.xml” in the xmlDoc to get the “category” attribute of the first <book> element. We are then changing the attribute node value.

Please Share