DOMParser and XMLSerializer in IE9 Beta

We've talked a lot about UI and browser features lately. Today I want to get back to web development by discussing some additions to the platform in IE9 Beta: DOMParser and XMLSerializer.

What do they do?

DOMParser enables building a document from an XML string and XMLSerializer allows you to serialize it back again. Together they make XML to DOM conversions as simple as using JSON, making it easier to use XML as a data-transfer format. More importantly, the nodes created by DOMParser are native, meaning they can be inserted and rendered within any web page. Plus XMLSerializer can serialize any native DOM node to an XML string, even nodes from HTML documents. This native-ness makes it easier to render your data directly, without having to transform it to HTML first.

How do they work?

Below is a basic example of how these APIs can be used. Check out the DOMParser and XMLSerializer demo on our Test Drive site for more details and a live sample.

 // Parse a string into an XML document
var parser = new DOMParser();
var doc = parser.parseFromString("<myXML/>", "text/xml");

 // Serialize any native DOM node to an XML string
// (including nodes from HTML documents)
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

The second parameter to parseFromString should be "text/xml" or "application/xml" for best cross-browser compatibility. For the full list of supported strings in IE9, see the MSDN documentation for parseFromString.

Why did we add these APIs?

Although these APIs are non-standard, they are supported in the latest versions of Firefox, Chrome, Safari, and Opera. They are also used by a number of existing sites and frameworks. Given this real-world usage and cross-browser support, we chose to implement these APIs in IE9 as part of our commitment to enabling the "Same Markup" on the web. Having these APIs helps more sites run the same code in the same way cross-browser. They also make working with XML from script easier.

How is this different from MSXML?

MSXML provides an XML structure that is separate from IE's native DOM. This means MSXML objects cannot be inserted and rendered within a web page. MSXML objects also do not get the interoperability and performance benefits of native JavaScript integration. The performance difference is particularly noticeable when copying elements from MSXML to HTML in order to render them.

How does this work with XMLHttpRequest (XHR)?

The responseXML property of XMLHttpRequest still returns an MSXML object in IE9, but you can use DOMParser with responseText to get a native XML object instead.

 // Using DOMParser with XMLHttpRequest
var parser = new DOMParser();
var xhr = new XMLHttpRequest();
...
var doc = parser.parseFromString(xhr.responseText, "text/xml");
...

What about XML parsing errors?

When the provided XML is not well-formed, the parseFromString API will throw a SYNTAX_ERR DOM Exception. This was chosen to align with the error handling behavior of innerHTML in XML documents as per the HTML5 spec.

Next Steps

As I mentioned before, many sites already use the DOMParser and XMLSerializer APIs today. Make sure your pages use feature detection to properly identify support for these APIs when using them:

 if(window.DOMParser) {
    // Code relying on DOMParser support
} else {
    // Fallback code
}

 if(window.XMLSerializer) {
    // Code relying on XMLSerializer support
} else {
    // Fallback code
}

Tony Ross
Program Manager