XML DOM Change Node Value

The nodeValue attribute is used to change the node value.

The setAttribute() method is used to change the value of an attribute.

Example

The following example uses an XML file books.xml.

Function loadXMLDoc(), located in external JavaScript, is used to load XML files.

Change the text node of the element
In this example, the nodeValue attribute is used to change the text node of the first <title> element in "books.xml".
Change the attribute value using setAttribute
In this example, the setAttribute() method is used to change the value of the "category" attribute of the first <book>.
Change the attribute value using nodeValue
In this example, the nodeValue attribute is used to change the value of the "category" attribute of the first <book>.

Change the value of the element

In the DOM, each component is a node. Element nodes do not have text values.

The text of an element node is stored in child nodes. This node is called a text node.

The method to change the text of an element is to change the value of this child node (text node).

Change the value of the text node

The nodeValue attribute can be used to change the value of a text node.

The following code snippet changes the text node value of the first <title> element:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Hello World";

Example Explanation:

  • By using loadXMLDoc() Change "books.xml"Load xmlDoc"
  • Get the text node of the first <title> element
  • Change the node value of this text node to "Hello World"

Try It Yourself (TIY)

Traverse and change the text nodes of all <title> elements:Try It Yourself (TIY)

Change the value of the attribute

In the DOM, attributes are also nodes. Unlike element nodes, attribute nodes have text values.

The method to change the value of an attribute is to change its text value.

This task can be completed by using the setAttribute() method or the nodeValue attribute of the attribute node.

By using the setAttribute() method to change the attribute

The setAttribute() method sets the value of an existing attribute or creates a new attribute.

The following code changes the category attribute of the <book> element:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("category","child");

Example Explanation:

  • By using loadXMLDoc() Change "books.xml"Load xmlDoc"
  • Get the first <book> element
  • Change the value of the "category" attribute to "child"

Try It Yourself (TIY)

Traverse all <title> and add a new attribute:Try It Yourself (TIY)

Note:If the attribute node does not exist, a new attribute (with the specified name and value) is created.

Change the attribute by using nodeValue

The nodeValue attribute can be used to change the value of an attribute node:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
y=x.getAttributeNode("category");
y.nodeValue="child";

Example Explanation:

  • By using loadXMLDoc() Change "books.xml"Load xmlDoc"
  • Get the "category" attribute of the first <book> element
  • Change the value of the attribute node to "child"

Try It Yourself (TIY)