XML in the browser

Currently, I’m doing some XML manipulation and transformation in the web browser. I have encountered some obstacles, tips and thoughts that I want to share with you.

HTML != XML

XML is case-sensitive in contrast to HTML. But confusingly, Chrome DevTools console treated XML nodes like HTML nodes and displayed them in lower-case. I reported this bug and it is now fixed. Until the fix arrives in stable versions of Chrome, you should keep an eye on that.

XML DOM Objects

The DOM defines a standard for accessing and manipulating documents.

The XML DOM presents an XML document as a tree-structure.

Source: http://www.w3schools.com/xml/dom_intro.asp

JavaScript handles XML with ‘XML DOM objects’. You can create such an object like this:

var xmlDoc = document.implementation.createDocument(null, "books");

The first argument can contain the namespace URI of the document to be created, if the document belongs to one. (Source: https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument)

As w3schools.com suggests, there are two other ways to obtain an XML DOM object, that you can manipulate in JavaScript:

  1. Fetching XML files with an XMLHttpRequest
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
    var xmlDoc = xhttp.responseXML; //important to use responseXML here
}
xhttp.open("GET", "books.xml", true);
xhttp.send();

2. Parsing XML strings

var xmlString = "";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml"); //important to use "text/xml"

When you have obtained an XML DOM object, you can use methods to manipulate it like

var node = xmlDoc.createElement("heyHo");
var elements = xmlDoc.getElementsByTagName("root");
elements[0].appendChild(node);

For a full reference, see the linked w3schools page.

It is important, that you don’t use the methods provided by the document namespace, i. e.

var node = document.createElement("Item");  // DON'T!

This will create HTML nodes instead of XML nodes and will result in a node with lower-case tag names. XML tag names are case-sensitive in contrast to HTML tag names.

You can serialize XML DOM objects like this:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(xmlDoc);

Stackoverflow

There were some misinformation about dealing with XML in the browser on Stackoverflow. That’s why I tried to write a little roundup of all this in this answer.

Children != ChildNodes != Attribute Nodes

It is known that XMLNode.childNodes returns all child nodes of a node (including text nodes) whereas XMLNode.children returns only the ones of the element type. But one thing that was not clear to me was the fact, that XML attributes are nodes in the DOM, but neither child nodes nor parent nodes. The tree image on this w3schools page shows this quite well. You can obtain attributes only by XMLNode.attributes.

XML has become an underdog

Big companies like Twitter or Foursquare have deprecated and removed XML support from their APIs. There is a suggestion to deprecate and remove XSLTProcessor in Chrome. It seems that XML is seen as clumsy in contrast to the more compact JSON. I am with Norman Walsh on this one:

If you’re writing JavaScript in a web browser, JSON is a natural fit.

XML wasn’t designed to solve the problem of transmitting structured bundles of atomic values. XML was designed to solve the problem of unstructured data. In a word or two: mixed content.

XML deals remarkably well with the full richness of unstructured data. I’m not worried about the future of XML at all even if its death is gleefully celebrated by a cadre of web API designers.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.