Entry

How can I serialize an XML DOM document to a string of markup?

How can I serialize an XML DOM node to a string of markup?

How can I serialize an SVG DOM node to a string?

How can I serialize an SVG DOM node to a string?

Feb 19th, 2006 09:06
Martin Honnen, http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmproxml.asp http://www.xulplanet.com/references/objref/XMLSerializer.html http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-LSSerializer-writeToString

Depending on the DOM implementation there are different ways to
serialize an XML DOM node to a string:
MSXML as used by IE5+/Win (or as used in ASP or Windows Script Host
scripts) provides a property named xml for any DOM node (i.e. element
node, text node, document node and others) that serializes the node to a
string with XML markup:
  // create example document from scratch
  var xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
  var god = xmlDocument.createElement('god');
  god.appendChild(xmlDocument.createTextNode('Kibo'));
  xmlDocument.appendChild(god);
  // serialize
  var markup = xmlDocument.xml;
  alert(markup); // shows <god>Kibo</god>
Mozilla (and Mozilla based browsers like Netscape 6 and later, Firefox)
expose the constructor function XMLSerializer to script so that an XML
serializer object can be constructed that has a method named
serializeToString to which any kind of XML DOM node can be passed to
serialize it:
  // create example document from scratch
  var xmlDocument = document.implementation.createDocument(
    '', 'god', null
  );
  xmlDocument.documentElement.appendChild(
    xmlDocument.createTextNode('Kibo')
  );
  // create serializer object
  var xmlSerializer = new XMLSerializer();
  // serialize
  var markup = xmlSerializer.serializeToString(xmlDocument);
  alert(markup); // shows <god>Kibo</god>
Since 8.00 beta Opera also exposes the constructor function
XMLSerializer to script so that the above Mozilla example should work
without change the same in upcoming Opera 8 and later releases.
Opera 8.00 beta furthermore implements the W3C DOM Level 3 Load and Save
so that in upcoming Opera 8 and later releases the following should work
to serialize an XML DOM node to a string: the method createLSSerializer
of the DOM implementation is called to create an XML serializer object
which has a method writeToString to which any XML DOM node can be passed:
  // create example document from scratch
  var xmlDocument = document.implementation.createDocument(
    '', 'god', null
  );
  xmlDocument.documentElement.appendChild(
    xmlDocument.createTextNode('Kibo')
  );
  // create serializer object
  var xmlSerializer = document.implementation.createLSSerializer();
  // serialize
  var markup = xmlSerializer.writeToString(xmlDocument);
  alert(markup); // shows <god>Kibo</god>
JavaScript is also used for scripting SVG (scalable vector graphics)
documents, if you do so with the native SVG support in Mozilla or Opera
then the above mentioned ways of course work for SVG nodes respectively
documents too.
However with IE/Win lots of people use the Adobe SVG viewer to display
SVG documents and that has its own function named printNode taking the
node as the single argument and returning the serialized markup as a
string e.g.
  var markup = printNode(someSVGNode);
Then there is the Batik SVG viewer, a Java implementation of an SVG
viewer that also allows scripting SVG documents with JavaScript
(respectively ECMAScript). The script engine there is Mozilla's Rhino
engine which as a Java implementation allows easy LiveConnect access to
Java. That way with script you can access the static Java method
  org.apache.batik.dom.util.DOMUtilities.writeNode
which takes a W3C DOM node as the first argument and a Java writer as
the second argument:
  var stringWriter = new java.io.StringWriter();
  Packages.org.apache.batik.dom.util.DOMUtilities.writeNode(node,
stringWriter);
  var markup = stringWriter.toString();
Here is a simple SVG document with an SVG circle element which onclick
in an alert dialog shows its own serialized markup with Firefox
1.5/Mozilla 1.8, with Opera 9, with Adobe SVG viewer 3 (for instance in
IE/Win), and with Batik (tested with Batik 1.6 and 1.5.1):
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript"><![CDATA[
function serializeNode (node) {
  if (typeof XMLSerializer != 'undefined') {
    return new XMLSerializer().serializeToString(node);
  }
  else if (typeof node.xml != 'undefined') {
    return node.xml;
  }
  else if (typeof printNode != 'undefined') {
    return printNode(node);
  }
  else if (typeof Packages != 'undefined') {
    try {
      var stringWriter = new java.io.StringWriter();
      Packages.org.apache.batik.dom.util.DOMUtilities.writeNode(
        node, stringWriter);
      return stringWriter.toString();
    }
    catch (e) {
      // might want to handle problem here
      return '';
    }
  }
  else {
    // might want to handle problem here
    return '';
  }
}
]]></script>
<circle cx="100" cy="100" r="30" fill="green"
        onclick="alert(serializeNode(evt.target));" />
</svg>