DOM Examples
Practical XML DOM manipulation examples
💡 Real-World DOM Examples
Learn XML DOM through practical examples that combine creating, adding, modifying, and removing nodes. These real-world scenarios will help you understand how to manipulate XML documents effectively in your projects.
// Complete example: Load, modify, and display XML
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
var books = xmlDoc.getElementsByTagName("book");
Common DOM Operations
These are the most frequently used XML DOM operations you'll encounter in real projects. Master these patterns to handle any XML manipulation task.
Reading Data
Extract information from XML
element.textContentUpdating Data
Modify existing XML content
element.textContent = "New"Adding Data
Insert new elements
parent.appendChild(child)Deleting Data
Remove unwanted elements
parent.removeChild(child)🔹 Example 1: Building a Book Catalog
Create a complete book catalog from scratch:
// Create new XML document
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(
"<catalog></catalog>", "text/xml"
);
// Book data
var bookData = [
{id: "B001", title: "The Great Gatsby", author: "F. Scott Fitzgerald", price: "12.99"},
{id: "B002", title: "1984", author: "George Orwell", price: "14.99"},
{id: "B003", title: "To Kill a Mockingbird", author: "Harper Lee", price: "13.99"}
];
// Add each book
bookData.forEach(function(data) {
var book = xmlDoc.createElement("book");
book.setAttribute("id", data.id);
var title = xmlDoc.createElement("title");
title.textContent = data.title;
book.appendChild(title);
var author = xmlDoc.createElement("author");
author.textContent = data.author;
book.appendChild(author);
var price = xmlDoc.createElement("price");
price.textContent = data.price;
book.appendChild(price);
xmlDoc.documentElement.appendChild(book);
});
console.log(xmlDoc.documentElement.outerHTML);Output:
<catalog>
<book id="B001">
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<price>12.99</price>
</book>
<book id="B002">
<title>1984</title>
<author>George Orwell</author>
<price>14.99</price>
</book>
<book id="B003">
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<price>13.99</price>
</book>
</catalog>
🔹 Example 2: Searching and Filtering
Find specific books based on criteria:
// Parse existing catalog
var xmlString = `<catalog>
<book id="B001"><title>JavaScript Guide</title><price>29.99</price></book>
<book id="B002"><title>Python Basics</title><price>24.99</price></book>
<book id="B003"><title>Java Programming</title><price>34.99</price></book>
</catalog>`;
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
// Find books under $30
var books = xmlDoc.getElementsByTagName("book");
var affordableBooks = [];
for (var i = 0; i < books.length; i++) {
var price = parseFloat(books[i].getElementsByTagName("price")[0].textContent);
if (price < 30) {
var title = books[i].getElementsByTagName("title")[0].textContent;
affordableBooks.push(title + " - $" + price);
}
}
console.log("Books under $30:");
affordableBooks.forEach(function(book) {
console.log("- " + book);
});Output:
Books under $30: - JavaScript Guide - $29.99 - Python Basics - $24.99
🔹 Example 3: Updating Prices
Apply a discount to all books:
// Parse catalog
var xmlString = `<catalog>
<book><title>Book A</title><price>20.00</price></book>
<book><title>Book B</title><price>30.00</price></book>
</catalog>`;
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
// Apply 10% discount
var books = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var priceElement = books[i].getElementsByTagName("price")[0];
var oldPrice = parseFloat(priceElement.textContent);
var newPrice = (oldPrice * 0.9).toFixed(2);
priceElement.textContent = newPrice;
}
console.log(xmlDoc.documentElement.outerHTML);Output:
<catalog> <book><title>Book A</title><price>18.00</price></book> <book><title>Book B</title><price>27.00</price></book> </catalog>
🔹 Example 4: Removing Elements
Delete books that are out of stock:
// Parse catalog with stock info
var xmlString = `<catalog>
<book><title>Book A</title><stock>5</stock></book>
<book><title>Book B</title><stock>0</stock></book>
<book><title>Book C</title><stock>3</stock></book>
<book><title>Book D</title><stock>0</stock></book>
</catalog>`;
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
// Remove out of stock books
var books = xmlDoc.getElementsByTagName("book");
// Loop backwards to avoid index issues
for (var i = books.length - 1; i >= 0; i--) {
var stock = parseInt(books[i].getElementsByTagName("stock")[0].textContent);
if (stock === 0) {
books[i].parentNode.removeChild(books[i]);
}
}
console.log(xmlDoc.documentElement.outerHTML);Output:
<catalog> <book><title>Book A</title><stock>5</stock></book> <book><title>Book C</title><stock>3</stock></book> </catalog>
🔹 Example 5: Sorting Elements
Sort books alphabetically by title:
// Parse unsorted catalog
var xmlString = `<catalog>
<book><title>Zebra Tales</title></book>
<book><title>Apple Stories</title></book>
<book><title>Mountain Adventures</title></book>
</catalog>`;
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
// Get all books and convert to array
var books = Array.from(xmlDoc.getElementsByTagName("book"));
// Sort by title
books.sort(function(a, b) {
var titleA = a.getElementsByTagName("title")[0].textContent;
var titleB = b.getElementsByTagName("title")[0].textContent;
return titleA.localeCompare(titleB);
});
// Clear catalog and re-add sorted books
var catalog = xmlDoc.documentElement;
while (catalog.firstChild) {
catalog.removeChild(catalog.firstChild);
}
books.forEach(function(book) {
catalog.appendChild(book);
});
console.log(xmlDoc.documentElement.outerHTML);Output:
<catalog> <book><title>Apple Stories</title></book> <book><title>Mountain Adventures</title></book> <book><title>Zebra Tales</title></book> </catalog>