Dom Examples in XML
Sure! Here are some simple DOM examples in XML that show how to access, add, modify, clone, and remove nodes in an XML document using JavaScript’s DOM API.
Sample XML Document
<library> <book id="101"> <title>Effective Java</title> <author>Joshua Bloch</author> </book> <book id="102"> <title>Clean Code</title> <author>Robert C. Martin</author> </book></library>1. Access Nodes
const books = xmlDoc.getElementsByTagName("book");for (let book of books) { const id = book.getAttribute("id"); const title = book.getElementsByTagName("title")[0].textContent; console.log(`Book ID: ${id}, Title: ${title}`);}2. Add Nodes
const library = xmlDoc.getElementsByTagName("library")[0];const newBook = xmlDoc.createElement("book");newBook.setAttribute("id", "103");const title = xmlDoc.createElement("title");title.textContent = "JavaScript: The Good Parts";newBook.appendChild(title);const author = xmlDoc.createElement("author");author.textContent = "Douglas Crockford";newBook.appendChild(author);library.appendChild(newBook);3. Modify Nodes
const book = xmlDoc.getElementsByTagName("book")[0];book.setAttribute("id", "201");const title = book.getElementsByTagName("title")[0];title.textContent = "Effective Java - 3rd Edition";4. Clone Nodes
const book = xmlDoc.getElementsByTagName("book")[0];const clone = book.cloneNode(true);clone.setAttribute("id", "104");xmlDoc.documentElement.appendChild(clone);5. Remove Nodes
const bookToRemove = xmlDoc.getElementsByTagName("book")[1];bookToRemove.parentNode.removeChild(bookToRemove);Full Working Example in HTML + JS
<!DOCTYPE html><html><head><title>DOM XML Examples</title></head><body><h2>DOM XML Manipulation Examples</h2><button onclick="addBook()">Add Book</button><button onclick="modifyBook()">Modify First Book</button><button onclick="cloneBook()">Clone First Book</button><button onclick="removeBook()">Remove Second Book</button><pre id="output"></pre><script>const xmlString = `<library> <book id="101"> <title>Effective Java</title> <author>Joshua Bloch</author> </book> <book id="102"> <title>Clean Code</title> <author>Robert C. Martin</author> </book></library>`;const parser = new DOMParser();const xmlDoc = parser.parseFromString(xmlString, "text/xml");function displayXML() { const serializer = new XMLSerializer(); const str = serializer.serializeToString(xmlDoc); document.getElementById("output").textContent = str;}function addBook() { const library = xmlDoc.getElementsByTagName("library")[0]; const newBook = xmlDoc.createElement("book"); newBook.setAttribute("id", "103"); const title = xmlDoc.createElement("title"); title.textContent = "JavaScript: The Good Parts"; newBook.appendChild(title); const author = xmlDoc.createElement("author"); author.textContent = "Douglas Crockford"; newBook.appendChild(author); library.appendChild(newBook); displayXML();}function modifyBook() { const book = xmlDoc.getElementsByTagName("book")[0]; book.setAttribute("id", "201"); const title = book.getElementsByTagName("title")[0]; title.textContent = "Effective Java - 3rd Edition"; displayXML();}function cloneBook() { const book = xmlDoc.getElementsByTagName("book")[0]; const clone = book.cloneNode(true); clone.setAttribute("id", "104"); xmlDoc.documentElement.appendChild(clone); displayXML();}function removeBook() { const books = xmlDoc.getElementsByTagName("book"); if (books.length > 1) { books[1].parentNode.removeChild(books[1]); displayXML(); }}displayXML();</script></body></html>If you want me to explain or generate examples for specific XML DOM operations, just ask!
