XML with JavaScript

JavaScript handles XML natively in browsers through the DOM API and the XMLHttpRequest / Fetch API. On the server side, Node.js uses libraries to parse and generate XML. JavaScript developers work with XML most often when consuming XML-based APIs, processing RSS feeds, or working with SVG.

Parsing XML from a String

var xmlString = `<products>
  <product id="P001">
    <name>Keyboard</name>
    <price>1199</price>
    <inStock>true</inStock>
  </product>
  <product id="P002">
    <name>Mouse</name>
    <price>799</price>
    <inStock>false</inStock>
  </product>
</products>`;

var parser = new DOMParser();
var doc = parser.parseFromString(xmlString, "text/xml");

// Check for errors
if (doc.querySelector("parsererror")) {
  console.error("Invalid XML");
}

Reading Data

var products = doc.getElementsByTagName("product");

for (var i = 0; i < products.length; i++) {
  var p = products[i];
  console.log({
    id:      p.getAttribute("id"),
    name:    p.getElementsByTagName("name")[0].textContent,
    price:   p.getElementsByTagName("price")[0].textContent,
    inStock: p.getElementsByTagName("inStock")[0].textContent
  });
}

Output

{ id: "P001", name: "Keyboard", price: "1199", inStock: "true" }
{ id: "P002", name: "Mouse",    price: "799",  inStock: "false" }

Fetching XML from a Server

// Modern Fetch API
fetch("https://api.example.com/products.xml")
  .then(response => response.text())
  .then(text => {
    var doc = new DOMParser().parseFromString(text, "text/xml");
    var items = doc.getElementsByTagName("product");
    Array.from(items).forEach(item => {
      console.log(item.getElementsByTagName("name")[0].textContent);
    });
  });

Building XML with JavaScript

var doc = document.implementation.createDocument("", "products", null);
var root = doc.documentElement;

// Create a product element
var product = doc.createElement("product");
product.setAttribute("id", "P003");

var name = doc.createElement("name");
name.textContent = "Monitor";

var price = doc.createElement("price");
price.textContent = "8999";

product.appendChild(name);
product.appendChild(price);
root.appendChild(product);

// Serialize to string
var serializer = new XMLSerializer();
var xmlStr = serializer.serializeToString(doc);
console.log(xmlStr);

Output

<products><product id="P003"><name>Monitor</name><price>8999</price></product></products>

Using XPath in JavaScript

var result = doc.evaluate(
  "//product[price > 1000]/name",
  doc,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

for (var i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i).textContent);
}
// Output: Keyboard, Monitor

Key Points to Remember

• DOMParser parses XML strings into a navigable DOM document.
• Use fetch() or XMLHttpRequest to retrieve XML from a server.
• XMLSerializer converts a DOM document back into an XML string.
• document.evaluate() runs XPath queries in the browser.
• All textContent from XML is a string — convert to numbers with parseInt() or parseFloat().