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:

<author>Author Name</author>

</book>

<title lang="en">XQuery Book</title>

<author>Author 1</author>

<author>Author 2</author>

<author>Author 3</author>

<author>Author 4</author>

</book>

</bookstore>

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




  
    ABC
    Author Name
    2020
    100.00
  

  
    XQuery Book
    Author 1
    Author 2
    Author 3
    Author 4
    2004
    350.00

Example:

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>

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

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:

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>

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

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:

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>

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:

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>

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

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:

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>

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

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.