3️⃣ XML DOM (Document Object Model) – Traverse, Manipulate & Control XML Data

Introduction – Why Learn XML DOM?

The XML DOM (Document Object Model) provides a structured, programmatic way to access and manipulate XML documents. Whether you need to read, update, or dynamically build XML data in the browser or server, the DOM allows you to interact with XML as a tree of nodes using JavaScript, Python, or other languages.

In this guide, you’ll learn:

• How the XML DOM represents document structure
• Methods to access, update, and remove XML nodes
• Techniques to traverse, add, and clone elements
• Practical examples for manipulating XML programmatically

Topics Covered

XML DOM Introduction

The Document Object Model (DOM) is a tree-like structure that treats XML documents as a set of nodes. Each element, attribute, and text content is a node, which can be accessed and manipulated using scripting.

• Root node: Entire XML document
• Element node: Each tag like <book> or <title>
• Text node: The content within tags
• Attribute node: Any tag attributes like id="123"

XML DOM Nodes

Node types in the DOM include:

XML DOM Accessing

Use JavaScript or other DOM-capable languages to access XML:

let xmlDoc = parser.parseFromString(xmlString, "text/xml");
let books = xmlDoc.getElementsByTagName("book");

• getElementsByTagName() returns a NodeList
• You can loop through it to access or modify nodes

XML DOM Node Info

Each node contains useful properties:

• nodeName: Name of the node (e.g., title)
• nodeValue: Value of text or attribute nodes
• nodeType: Type code (e.g., 1 for element)

XML DOM Node List

NodeList is a collection of nodes accessed via:

let titles = xmlDoc.getElementsByTagName("title");
console.log(titles.length); // Number of <title> elements

• Loop with for or forEach for processing

🚶 XML DOM Traversing

Use DOM traversal to walk through an XML tree:

let book = xmlDoc.documentElement.firstChild;
while (book) {
  console.log(book.nodeName);
  book = book.nextSibling;
}

XML DOM Navigating

DOM provides relational navigation:

XML DOM Get Values

let author = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;

• This extracts inner text like <author>John</author> → John

XML DOM Change Nodes

Update a node’s content:

xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue = "New Title";

Or modify an attribute:

element.setAttribute("category", "science");

XML DOM Remove Nodes

To remove an element:

let book = xmlDoc.getElementsByTagName("book")[0];
book.parentNode.removeChild(book);

XML DOM Replace Nodes

Replace one node with another:

parent.replaceChild(newNode, oldNode);

Useful for updating data dynamically without deleting manually.

XML DOM Create Nodes

Create elements, text, and attributes:

let newNode = xmlDoc.createElement("price");
let text = xmlDoc.createTextNode("19.99");
newNode.appendChild(text);

XML DOM Add Nodes

Append a new node to an existing element:

let book = xmlDoc.getElementsByTagName("book")[0];
book.appendChild(newNode);

XML DOM Clone Nodes

Copy elements using:

let clone = originalNode.cloneNode(true); // true = deep copy

• Use when duplicating entire branches of XML

XML DOM Examples

Example: Changing all titles to “Unknown”

let titles = xmlDoc.getElementsByTagName("title");
for (let i = 0; i < titles.length; i++) {
  titles[i].childNodes[0].nodeValue = "Unknown";
}

Example: Adding a new <price> to each <book>

let books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  let price = xmlDoc.createElement("price");
  price.appendChild(xmlDoc.createTextNode("19.99"));
  books[i].appendChild(price);
}

Summary – Recap & Next Steps

The XML DOM gives you full control over an XML document’s structure and content. With node-based access and manipulation tools, developers can traverse, create, and update any part of the XML tree dynamically.

Key Takeaways:

• DOM treats XML as a tree of nodes
• Use getElementsByTagName, childNodes, and nodeValue to interact with XML
• DOM manipulation includes creating, updating, and removing elements/attributes
• JavaScript and XML DOM together offer real-time document control

Real-World Relevance:
Used in web-based editors, AJAX apps, configuration dashboards, report generators, and any tool requiring live XML data manipulation.

FAQ – XML DOM

What is the XML DOM used for?

Accessing and manipulating XML documents programmatically in a structured, tree-based model.

What are the key node types in the XML DOM?

Element, attribute, text, comment, document. Each serves a specific purpose in document structure.

Can I create new XML content with DOM?

Yes. You can use createElement, createTextNode, and appendChild to build new structures.

How do I read values from an XML element?

Use getElementsByTagName() and .childNodes[0].nodeValue.

Is XML DOM supported in all browsers?

Yes. Modern browsers fully support XML DOM through JavaScript.