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

🔢 Topic	📄 Description
📖 XML DOM Introduction	What is DOM and how XML represents data
🌿 XML DOM Nodes	Node types: element, text, attribute, etc.
🔍 XML DOM Accessing	DOM access methods and techniques
ℹ️ XML DOM Node Info	NodeName, nodeValue, nodeType explained
📋 XML DOM Node List	Accessing multiple nodes using collections
🚶 XML DOM Traversing	Walk through the document tree
🧭 XML DOM Navigating	FirstChild, NextSibling, ParentNode, etc.
🧾 XML DOM Get Values	Reading text from nodes
✏️ XML DOM Change Nodes	Modify values and attributes
❌ XML DOM Remove Nodes	Delete elements or text
🔁 XML DOM Replace Nodes	Swap nodes within the document
🆕 XML DOM Create Nodes	Create elements, text, and attributes
➕ XML DOM Add Nodes	Append or insert new nodes
🧬 XML DOM Clone Nodes	Deep/shallow copying of nodes
💡 XML DOM Examples	Code demonstrations of DOM operations

---

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

🧩 Node Type	🔢 Code	📄 Description
Element	1	Represents XML elements
Attribute	2	Represents attributes
Text	3	Text inside elements
Comment	8	XML comments (<!-- comment -->)
Document	9	Entire XML document

---

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

🔧 Property	🔍 Description
parentNode	Get parent of a node
firstChild	Get first child node
lastChild	Get last child node
nextSibling	Get next sibling node
previousSibling	Get previous sibling node
childNodes	NodeList of all children

---

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

---

Share Now :