DOMParser

  • Revision slug: Web/API/DOMParser
  • Revision title: DOMParser
  • Revision id: 400049
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment updated other-browser workaround from original sourceMoved From DOM/DOMParser to Web/API/DOMParser

Revision Content

DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.

Note that XMLHttpRequest supports parsing XML and HTML from URL-addressable resources.

Creating a DOMParser

To create a DOMParser object simply use new DOMParser().

For more information about creating a DOMParser in Firefox extensions, please see the documentation for nsIDOMParser.

Parsing XML

Once you have created a parser object, you can parse XML from a string using the parseFromString method:

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

Error handling

Note that if the parsing process failed, DOMParser currently does not throw an exception, but instead returns an error document (see {{Bug(45566)}}):

<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(error description)
<sourcetext>(a snippet of the source XML)</sourcetext>
</parsererror>

The parsing errors are also reported to the Error Console, with the document URI (see below) as the source of the error.

Parsing an SVG or HTML document

The DOMParser can also be used to parse a SVG document {{geckoRelease("10.0")}} or a HTML document {{geckoRelease("12.0")}}. There are three different results possible, selected by the MIME type given. If the MIME type is text/xml, the resulting object will be an XMLDocument, if the MIME type is text/svg+xml, it will be an SVGDocument and if the MIME type is text/html, it will be an HTMLDocument.

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.

DOMParser HTML extension for other browsers

/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
	"use strict";

	var
	  DOMParser_proto = DOMParser.prototype
	, real_parseFromString = DOMParser_proto.parseFromString
	;

	// Firefox/Opera/IE throw errors on unsupported types
	try {
		// WebKit returns null on unsupported types
		if ((new DOMParser).parseFromString("", "text/html")) {
			// text/html parsing is natively supported
			return;
		}
	} catch (ex) {}

	DOMParser_proto.parseFromString = function(markup, type) {
		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
			var
			  doc = document.implementation.createHTMLDocument("")
			;
	      		if (markup.toLowerCase().indexOf('<!doctype') > -1) {
        			doc.documentElement.innerHTML = markup;
      			}
      			else {
        			doc.body.innerHTML = markup;
      			}
			return doc;
		} else {
			return real_parseFromString.apply(this, arguments);
		}
	};
}(DOMParser));

 

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
XML support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
SVG support {{CompatUnknown}} {{CompatGeckoDesktop(10.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
HTML support {{CompatUnknown}} {{CompatGeckoDesktop(12.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
XML support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
SVG support {{CompatUnknown}} {{CompatGeckoMobile(10.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
HTML support {{CompatUnknown}} {{CompatGeckoMobile(12.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

Revision Source

<p><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="http://html5.org/specs/dom-parsing.html" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p>
<p>Note that <a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> supports parsing XML and HTML from URL-addressable resources.</p>
<h2 id="Creating_a_DOMParser">Creating a DOMParser</h2>
<p>To create a <code>DOMParser</code> object simply use <code>new DOMParser()</code>.</p>
<p>For more information about creating a <code>DOMParser</code> in Firefox extensions, please see the documentation for <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>.</p>
<h2 id="Parsing_XML">Parsing XML</h2>
<p>Once you have created a parser object, you can parse XML from a string using the <code>parseFromString</code> method:</p>
<pre class="brush: js">
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
</pre>
<h3 id="Error_handling" name="Error_handling">Error handling</h3>
<p>Note that if the parsing process failed, <code>DOMParser</code> currently does not throw an exception, but instead returns an error document (see {{Bug(45566)}}):</p>
<pre class="brush:xml">
&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
(error description)
&lt;sourcetext&gt;(a snippet of the source XML)&lt;/sourcetext&gt;
&lt;/parsererror&gt;
</pre>
<p>The parsing errors are also reported to the <a href="/en-US/docs/Error_Console" title="Error Console">Error Console</a>, with the document URI (see below) as the source of the error.</p>
<h2 id="Parsing_an_SVG_or_HTML_document">Parsing an SVG or HTML document</h2>
<p>The <code>DOMParser</code> can also be used to parse a SVG document {{geckoRelease("10.0")}} or a HTML document {{geckoRelease("12.0")}}. There are three different results possible, selected by the MIME type given. If the MIME type is <code>text/xml</code>, the resulting object will be an <code>XMLDocument</code>, if the MIME type is <code>text/svg+xml</code>, it will be an <code>SVGDocument</code> and if the MIME type is <code>text/html</code>, it will be an <code>HTMLDocument</code>.</p>
<pre class="brush: js">
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.
</pre>
<h3 id="DOMParser_HTML_extension_for_other_browsers">DOMParser HTML extension for other browsers</h3>
<pre class="brush: js">
/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
	"use strict";

	var
	  DOMParser_proto = DOMParser.prototype
	, real_parseFromString = DOMParser_proto.parseFromString
	;

	// Firefox/Opera/IE throw errors on unsupported types
	try {
		// WebKit returns null on unsupported types
		if ((new DOMParser).parseFromString("", "text/html")) {
			// text/html parsing is natively supported
			return;
		}
	} catch (ex) {}

	DOMParser_proto.parseFromString = function(markup, type) {
		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
			var
			  doc = document.implementation.createHTMLDocument("")
			;
	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
        			doc.documentElement.innerHTML = markup;
      			}
      			else {
        			doc.body.innerHTML = markup;
      			}
			return doc;
		} else {
			return real_parseFromString.apply(this, arguments);
		}
	};
}(DOMParser));
</pre>
<p>&nbsp;</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>XML support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>SVG support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop(10.0)}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>HTML support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop(12.0)}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>XML support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>SVG support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile(10.0)}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>HTML support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile(12.0)}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
  <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
  <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
  <li><a href="/en-US/docs/Parsing_HTML_From_Chrome" title="Parsing HTML From Chrome">Parsing HTML&nbsp;from chrome</a></li>
</ul>
Revert to this revision