Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1104005 of Parsing and serializing XML

  • Revision slug: Web/Guide/Parsing_and_serializing_XML
  • Revision title: Parsing and serializing XML
  • Revision id: 1104005
  • Created:
  • Creator: RomainLanz
  • Is current revision? Yes
  • Comment Cleaning XML example

Revision Content

The Web platform provides the following objects for parsing and serializing XML:

  • XMLSerializer to serialize DOM trees to strings
  • XPath to address (point to) different parts of an XML document (through a non-XML syntax) into strings
  • DOMParser to parse XML from strings into DOM trees
  • XMLHttpRequest to parse URL-addressable resources into DOM trees

Part 1: How to create an XML document

Using one of the following approaches to create an XML document (which is an instance of Document).

Parsing strings into DOM trees

var sMyString = '<a id="a"><b id="b">hey!</b></a>';
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");
// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);

Building an XML document starting from a JavaScript Object tree (JXON)

Please see the JXON reverse algorithms.

Parsing URL-addressable resources into DOM trees

Using XMLHttpRequest

Here is sample code that reads and parses a URL-addressable XML file into a DOM tree:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  dump(xhr.responseXML.documentElement.nodeName);
}
xhr.onerror = function() {
  dump("Error while getting XML.");
}
xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();

xhr.responseXML is a Document instance.

node.js

If you prefer node.js, this code also parses a file into a DOM tree. Unlike XMLHttpRequest, it does not work with remote files:

var oFile = DirIO.get("ProfD"); // %Profile% dir
oFile.append("extensions");
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}");
oFile.append("people.xml");
oDOM = (new DOMParser()).parseFromString(FileIO.read(oFile), "text/xml");

// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);

Part 2: How to serialize the content of a given XML document

Use the following approaches to serialize the contents of the XML document you created in Part 1.

Serializing DOM trees to strings

First, create a DOM tree as described in How to Create a DOM tree. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.

Now, let's serialize doc — the DOM tree — to a string:

var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(doc);

The new XMLSerializer() constructor is not available from within a JS XPCOM component (or a JS module). Instead, write:

var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
                            .createInstance(Components.interfaces.nsIDOMSerializer);
var sXML = oSerializer.serializeToString(doc);

"Pretty" serialization of DOM trees to strings

You can pretty print a DOM tree using XMLSerializer and E4X. First, create a DOM tree as described in the How to Create a DOM tree article. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}. The doc variable contains the DOM tree.

var oSerializer = new XMLSerializer();
var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();

Indents consist of two spaces. To write a more efficient version or customize the indent string, use {{ domxref("treeWalker") }}.

Note: When using the E4X toXMLString method, your CDATA elements will be lost, and only the containing text will remain. So if you have CDATA elements in your XML, using the preceding method might not be useful.
<content><![CDATA[This is the content]]></content>

Becomes

<content>This is the content</content>

Serializing DOM trees to Javascript Object trees (JXON)

JXON (lossless JavaScript XML Object Notation) is a way to represent JavaScript Objects using XML. To address only parts of an XML document, use XPath instead of converting the whole document into JSON! Otherwise, read the article about JXON.

Serializing DOM trees to files

First, create a DOM tree as described in the How to Create a DOM tree article. If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, skip to the end of this section.

Now, let's serialize doc, the DOM tree, to a file. For more information about files, see about using files in Mozilla):

var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
oFile.append("extensions"); // extensions sub-directory
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
oFile.append("myXMLFile.xml"); // filename
oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
oFOStream.close();

Serializing XMLHttpRequest objects to files

If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, use the same code as above but replace serializer.serializeToStream(doc, oFOStream, "") with serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "") where xmlHttpRequest is an instance of XMLHttpRequest.

Note that this first parses the XML retrieved from the server, and then re-serializes it into a stream. Depending on your needs, you could just save the xmlHttpRequest.responseText directly.

See also

{{ languages( {"ja": "ja/Parsing_and_serializing_XML","zh-cn": "zh-cn/Parsing_and_serializing_XML", "it": "it/Costruire_e_decostruire_un_documento_XML" } ) }}

Revision Source

<p>The Web platform provides the following objects for parsing and serializing XML:</p>

<ul>
 <li><a href="/en/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a> to serialize <strong>DOM trees to strings</strong></li>
 <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a> to address (point to) <strong>different parts of an <a href="/en/XML" rel="internal" title="en/XML">XML</a> document (through a non-XML syntax) into strings</strong></li>
 <li><a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> to parse XML from <strong>strings into DOM trees</strong></li>
 <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> to parse <strong style="font-weight:bold">URL-addressable resources</strong><strong> into DOM trees</strong></li>
</ul>

<h2 id="Part_1_How_to_create_an_XML_document">Part 1: How to create an XML document</h2>

<p>Using one of the following approaches to create an XML document (which is an instance of <code>Document</code>).</p>

<h3 id="Parsing_strings_into_DOM_trees">Parsing strings into DOM trees</h3>

<div style="overflow:hidden">
<pre class="brush: js">
var sMyString = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");
// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
</pre>
</div>

<h3 id="Building_an_XML_document_starting_from_a_JavaScript_Object_tree_(JXON)">Building an XML document starting from a JavaScript Object tree (JXON)</h3>

<p>Please see the <a class="internal" href="/en/JXON#Reverse_Algorithms" title="en/JXON – Reverse Algorithms">JXON reverse algorithms</a>.</p>

<h3 id="Parsing_URL-addressable_resources_into_DOM_trees">Parsing URL-addressable resources into DOM trees</h3>

<h4 id="Using_XMLHttpRequest">Using XMLHttpRequest</h4>

<p>Here is sample code that reads and parses a URL-addressable XML file into a DOM tree:</p>

<pre class="brush: js">
var xhr = new XMLHttpRequest();
xhr.onload = function() {
  dump(xhr.responseXML.documentElement.nodeName);
}
xhr.onerror = function() {
  dump("Error while getting XML.");
}
xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();
</pre>

<p><code>xhr.responseXML</code> is a <code><a class="external" href="https://developer.mozilla.org/en-US/docs/DOM/Document">Document</a></code> instance.</p>

<h4 id="node.js">node.js</h4>

<p>If you prefer <a href="/en-US/docs/Glossary/Node.js">node.js</a>, this code also parses a file into a DOM tree. Unlike <code>XMLHttpRequest</code>, it does not work with remote files:</p>

<pre class="brush: js">
var oFile = DirIO.get("ProfD"); // %Profile% dir
oFile.append("extensions");
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}");
oFile.append("people.xml");
oDOM = (new DOMParser()).parseFromString(FileIO.read(oFile), "text/xml");

// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
</pre>

<h2 id="Part_2_How_to_serialize_the_content_of_a_given_XML_document">Part 2: How to serialize the content of a given XML document</h2>

<p>Use the following approaches to serialize the contents of the XML document you created in Part 1.</p>

<h3 id="Serializing_DOM_trees_to_strings">Serializing DOM trees to strings</h3>

<p>First, create a DOM tree as described in <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a>. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}.</p>

<p>Now, let's serialize <code>doc</code> — the DOM tree — to a string:</p>

<pre class="brush: js">
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(doc);</pre>

<p>The <code>new XMLSerializer()</code>&nbsp;constructor is not available from within a JS XPCOM component (or a <a class="internal" href="/en/JavaScript_code_modules" title="En/JavaScript modules">JS module</a>). Instead, write:</p>

<pre class="brush: js">
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.createInstance(Components.interfaces.nsIDOMSerializer);
var sXML = oSerializer.serializeToString(doc);
</pre>

<h4 id="Pretty_serialization_of_DOM_trees_to_strings">"Pretty" serialization of DOM trees to strings</h4>

<p>You can <a class="external" href="https://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <a href="/en/XMLSerializer" title="XMLSerializer"><code>XMLSerializer</code></a> and <a href="/en/E4X" title="en/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. Alternatively, use a DOM tree obtained from {{ domxref("XMLHttpRequest") }}. The <code>doc</code> variable contains the DOM tree.</p>

<pre class="brush: js">
var oSerializer = new XMLSerializer();
var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre>

<p>Indents consist of two spaces. To write a more efficient version or customize the indent string, use {{ domxref("treeWalker") }}.</p>

<div class="note"><strong>Note:</strong>&nbsp;When using the E4X <code>toXMLString</code> method, your <strong>CDATA elements will be lost</strong>, and only the containing text will remain. So if you have CDATA&nbsp;elements in your XML,&nbsp;<span style="background-color:rgb(245, 246, 245)">using the preceding method might not be useful</span>.</div>

<pre class="brush: xml">
&lt;content&gt;&lt;![CDATA[This is the content]]&gt;&lt;/content&gt;
</pre>

<p>Becomes</p>

<pre class="brush: xml">
&lt;content&gt;This is the content&lt;/content&gt;</pre>

<h3 id="Serializing_DOM_trees_to_Javascript_Object_trees_(JXON)">Serializing DOM trees to Javascript Object trees (JXON)</h3>

<p><a href="/en/JXON" title="en/JXON">JXON</a> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) is a way to represent JavaScript Objects using XML. To address only parts of an XML document, use <a class="internal" href="/en/XPath" title="en/XPath">XPath</a> instead of converting the whole document into JSON! Otherwise, read the <a class="internal" href="/en/JXON" title="en/JXON">article about JXON</a>.</p>

<h3 id="Serializing_DOM_trees_to_files">Serializing DOM trees to files</h3>

<p>First, create a DOM tree as described in the <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">How to Create a DOM tree</a> article. If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, skip to the end of this section.</p>

<p>Now, let's serialize&nbsp;<code>doc</code>, the DOM tree, to a file. For more information about files, see&nbsp;<a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p>

<pre class="brush: js">
var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
oFile.append("extensions"); // extensions sub-directory
oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
oFile.append("myXMLFile.xml"); // filename
oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
oFOStream.close();
</pre>

<h3 id="Serializing_XMLHttpRequest_objects_to_files">Serializing XMLHttpRequest objects to files</h3>

<p>If you already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p>

<p>Note that this first parses the XML retrieved from the server, and then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
 <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
 <li><a href="/en/JXON" title="en/JXON">JXON</a></li>
</ul>

<p>{{ languages( {"ja": "ja/Parsing_and_serializing_XML","zh-cn": "zh-cn/Parsing_and_serializing_XML", "it": "it/Costruire_e_decostruire_un_documento_XML" } ) }}</p>
Revert to this revision