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.

XML Parser

XML Approaches to Store Documents

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples