Home »
XML Tutorial
XML DOM
By IncludeHelp Last updated : December 29, 2024
What is XML DOM?
The XML DOM is a W3C standard that defines:
- The logical structure of XML documents.
- Methods and properties for accessing and manipulating the structure and content of XML documents.
Each element, attribute, and piece of text in an XML document is represented as a node in the DOM tree, which allows developers to traverse and manipulate the document easily.
Why Use XML DOM?
Key Features
- Tree-Based Structure: XML DOM represents an XML document as a tree, enabling hierarchical access.
- Dynamic Manipulation: Add, edit, or delete elements and attributes in real time.
- Cross-Platform Compatibility: The DOM API is language-neutral and works with various programming environments.
Benefits
- Makes XML documents interactive and dynamic.
- Provides a uniform way to process XML across platforms and browsers.
- Supports querying and filtering of data.
XML DOM Tree Structure
Consider the blow example of an XML document:
<?xml version="1.0"?>
<library>
<book category="fiction">
<title lang="en">The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
</book>
<book category="history">
<title lang="en">Sapiens</title>
<author>Yuval Noah Harari</author>
<year>2011</year>
</book>
</library>
This XML document is represented in the DOM as:
Working with XML DOM
Here are some examples; practice these examples to learn working with XML DOMs:
Example: Loading XML Using JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>XML DOM Example</h1>
<div>
<b>Title:</b> <span id="title"></span><br>
<b>Author:</b> <span id="author"></span>
</div>
<script>
const xmlString = `
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
</book>
</library>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
const author = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
document.getElementById("title").textContent = title;
document.getElementById("author").textContent = author;
</script>
</body>
</html>
Example: Modifying an XML Document (Adding a New Node)
const newBook = xmlDoc.createElement("book");
const newTitle = xmlDoc.createElement("title");
const newTitleText = xmlDoc.createTextNode("1984");
newTitle.appendChild(newTitleText);
newBook.appendChild(newTitle);
xmlDoc.getElementsByTagName("library")[0].appendChild(newBook);
This will add a new <book> element with the title 1984 to the library.
Example: Retrieving Attributes
const category = xmlDoc.getElementsByTagName("book")[0].getAttribute("category");
console.log(category); // Outputs: fiction
Example: Modifying Attributes
xmlDoc.getElementsByTagName("book")[0].setAttribute("category", "classic");
Example: Removing a Node
const library = xmlDoc.getElementsByTagName("library")[0];
const book = xmlDoc.getElementsByTagName("book")[0];
library.removeChild(book);
This removes the first <book> element from the library.
Advertisement
Advertisement