XML DOM Examples

Welcome to The Coding College! In this tutorial, we’ll cover practical examples of using the XML DOM (Document Object Model) to manipulate XML data programmatically. These examples demonstrate how to perform common tasks like accessing nodes, updating values, adding or removing elements, and more.

Example XML Document

We’ll use the following XML document in our examples:

<library>
  <book id="1">
    <title>XML Basics</title>
    <author>John Doe</author>
  </book>
  <book id="2">
    <title>Learn JavaScript</title>
    <author>Jane Smith</author>
  </book>
</library>

Examples

1. Accessing Elements

To access specific elements or their content, use methods like getElementsByTagName() or getAttribute().

Example: Get All Book Titles

const parser = new DOMParser();
const xmlString = `
  <library>
    <book id="1">
      <title>XML Basics</title>
      <author>John Doe</author>
    </book>
    <book id="2">
      <title>Learn JavaScript</title>
      <author>Jane Smith</author>
    </book>
  </library>
`;
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

// Get all <title> elements
const titles = xmlDoc.getElementsByTagName("title");

for (let i = 0; i < titles.length; i++) {
  console.log(titles[i].textContent);
}

Output:

XML Basics  
Learn JavaScript

2. Updating Element Values

You can modify the content of a node using the textContent property.

Example: Update the Title of the First Book

const firstTitle = titles[0];
firstTitle.textContent = "Mastering XML";

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1">
    <title>Mastering XML</title>
    <author>John Doe</author>
  </book>
  <book id="2">
    <title>Learn JavaScript</title>
    <author>Jane Smith</author>
  </book>
</library>

3. Adding New Nodes

Add new elements to your XML structure using methods like createElement() and appendChild().

Example: Add a <publisher> Element to All Books

const books = xmlDoc.getElementsByTagName("book");

for (let i = 0; i < books.length; i++) {
  const publisher = xmlDoc.createElement("publisher");
  publisher.textContent = "Tech Books Publishing";

  books[i].appendChild(publisher);
}

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1">
    <title>Mastering XML</title>
    <author>John Doe</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="2">
    <title>Learn JavaScript</title>
    <author>Jane Smith</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
</library>

4. Removing Nodes

To remove a node, use the removeChild() method.

Example: Remove the <author> Element from the First Book

const firstBook = books[0];
const author = firstBook.getElementsByTagName("author")[0];

// Remove the <author> node
firstBook.removeChild(author);

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="2">
    <title>Learn JavaScript</title>
    <author>Jane Smith</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
</library>

5. Replacing Nodes

You can replace one node with another using the replaceChild() method.

Example: Replace the <title> Element of the Second Book

const secondBook = books[1];
const oldTitle = secondBook.getElementsByTagName("title")[0];

// Create a new <title> node
const newTitle = xmlDoc.createElement("title");
newTitle.textContent = "Advanced JavaScript";

// Replace the old <title> with the new one
secondBook.replaceChild(newTitle, oldTitle);

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="2">
    <title>Advanced JavaScript</title>
    <author>Jane Smith</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
</library>

6. Cloning Nodes

Duplicate an existing node with the cloneNode() method.

Example: Clone the First Book and Add It to the Library

const clonedBook = firstBook.cloneNode(true);
clonedBook.setAttribute("id", "3");

xmlDoc.getElementsByTagName("library")[0].appendChild(clonedBook);

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="2">
    <title>Advanced JavaScript</title>
    <author>Jane Smith</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="3">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
</library>

7. Navigating Between Nodes

Navigate between sibling nodes using properties like nextSibling and previousSibling.

Example: Get the Next Sibling of the First Book

const nextBook = firstBook.nextElementSibling;
console.log(nextBook.getAttribute("id")); // Outputs: 2

8. Reading Attributes

Read attributes of a node using the getAttribute() method.

Example: Get the id Attribute of Each Book

for (let i = 0; i < books.length; i++) {
  console.log(books[i].getAttribute("id"));
}

Output:

1  
2  
3

9. Setting or Modifying Attributes

You can use setAttribute() to add or modify an attribute.

Example: Add a genre Attribute to All Books

for (let i = 0; i < books.length; i++) {
  books[i].setAttribute("genre", "Programming");
}

console.log(new XMLSerializer().serializeToString(xmlDoc));

Output:

<library>
  <book id="1" genre="Programming">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="2" genre="Programming">
    <title>Advanced JavaScript</title>
    <author>Jane Smith</author>
    <publisher>Tech Books Publishing</publisher>
  </book>
  <book id="3" genre="Programming">
    <title>Mastering XML</title>
    <publisher>Tech Books Publishing</publisher>
  </book>
</library>

Conclusion

These examples showcase how powerful and versatile the XML DOM is when it comes to manipulating XML documents. With the ability to access, modify, add, remove, and clone nodes dynamically, you can handle XML data efficiently in your applications.

Leave a Comment