XML DOM - Change Node Values - The Coding College

Welcome to The Coding College! In this tutorial, we’ll explore how to change node values in an XML document using the XML DOM (Document Object Model). Modifying node values is essential for dynamically updating XML data, whether you’re building applications, processing data, or working with dynamic content.

How XML DOM Handles Node Value Updates

The XML DOM allows you to manipulate the values of elements, attributes, and text nodes. By accessing the XML document tree, you can modify the structure and content dynamically.

Ways to Change Node Values

Node Type	What You Can Change	Method/Property
Element Nodes	Change the text content inside elements	`textContent` or `nodeValue`
Attribute Nodes	Update the value of attributes	`setAttribute()`
Text Nodes	Modify the text value of text nodes	`nodeValue`

Example XML Document

Let’s use the following XML document for examples:

<library>
  <book id="1">
    <title>XML Basics</title>
    <author>John Doe</author>
  </book>
  <book id="2">
    <title>JavaScript Essentials</title>
    <author>Jane Smith</author>
  </book>
</library>

Parsing XML

To modify the XML, parse the XML string into a DOM object:

const parser = new DOMParser();
const xmlString = `
  <library>
    <book id="1">
      <title>XML Basics</title>
      <author>John Doe</author>
    </book>
    <book id="2">
      <title>JavaScript Essentials</title>
      <author>Jane Smith</author>
    </book>
  </library>
`;
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

Changing Node Values

1. Changing Element Node Values

To change the value of an element node, use the textContent property.

Example: Updating Book Titles

const books = xmlDoc.getElementsByTagName("book");

// Change the title of the first book
books[0].getElementsByTagName("title")[0].textContent = "Advanced XML";

// Change the title of the second book
books[1].getElementsByTagName("title")[0].textContent = "Mastering JavaScript";

console.log(books[0].getElementsByTagName("title")[0].textContent); // Output: "Advanced XML"
console.log(books[1].getElementsByTagName("title")[0].textContent); // Output: "Mastering JavaScript"

2. Changing Attribute Node Values

To modify attributes, use the setAttribute() method.

Example: Updating the id Attribute

books[0].setAttribute("id", "101");
books[1].setAttribute("id", "102");

console.log(books[0].getAttribute("id")); // Output: "101"
console.log(books[1].getAttribute("id")); // Output: "102"

3. Changing Text Node Values

You can directly access and modify text node values using nodeValue.

Example: Updating Author Names

const authors = xmlDoc.getElementsByTagName("author");

// Change the author of the first book
authors[0].childNodes[0].nodeValue = "Dr. John Doe";

// Change the author of the second book
authors[1].childNodes[0].nodeValue = "Dr. Jane Smith";

console.log(authors[0].textContent); // Output: "Dr. John Doe"
console.log(authors[1].textContent); // Output: "Dr. Jane Smith"

4. Combining Element and Attribute Updates

You can update both element text values and their attributes in one operation.

Example: Updating Book Details

// Update title, author, and id of the first book
const firstBook = books[0];
firstBook.getElementsByTagName("title")[0].textContent = "XML Masterclass";
firstBook.getElementsByTagName("author")[0].textContent = "Professor XML";
firstBook.setAttribute("id", "201");

console.log(firstBook.outerHTML);
// Output: <book id="201"><title>XML Masterclass</title><author>Professor XML</author></book>

Full Example: Modifying Multiple Nodes

Here’s a complete example of modifying an XML document:

// Modify the first book
books[0].getElementsByTagName("title")[0].textContent = "Learn XML";
books[0].getElementsByTagName("author")[0].textContent = "XML Expert";
books[0].setAttribute("id", "301");

// Modify the second book
books[1].getElementsByTagName("title")[0].textContent = "JavaScript Pro";
books[1].getElementsByTagName("author")[0].textContent = "JS Guru";
books[1].setAttribute("id", "302");

// Display updated XML
const serializer = new XMLSerializer();
const updatedXmlString = serializer.serializeToString(xmlDoc);
console.log(updatedXmlString);

Output:

<library>
  <book id="301">
    <title>Learn XML</title>
    <author>XML Expert</author>
  </book>
  <book id="302">
    <title>JavaScript Pro</title>
    <author>JS Guru</author>
  </book>
</library>

Practical Applications

Dynamic Content Updates: Use DOM manipulation to update XML-based dynamic content for web or software applications.
XML Data Processing: Modify XML data before sending it to a server or saving it to a file.
Data Integration: Update XML for integrating with other APIs or systems that use XML data.

Conclusion

The XML DOM provides powerful tools for modifying node values, enabling you to dynamically update XML documents. Whether you’re changing element text, updating attributes, or manipulating text nodes, these methods ensure you can work effectively with structured data.

XML DOM – Change Node Values