The DOMParser
interface provides the ability to parse XML or HTML source code from a string into a DOM Document
.
Note: XMLHttpRequest
can parse XML and HTML directly from a URL-addressable resource, returning a Document
in its response
property.
You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the XMLSerializer
interface.
In the case of an HTML document, you can also replace portions of the DOM with new DOM trees built from HTML by setting the value of the Element.innerHTML
and outerHTML
properties. These properties can also be read to fetch HTML fragments corresponding to the corresponding DOM subtree.
Creating a DOMParser
To create a DOMParser
object simply use new DOMParser()
.
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 fails, the DOMParser
does not throw an exception, but instead returns an error document:
<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 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) or an HTML document (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9). 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 image/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(stringContainingSVGSource, "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 proto = DOMParser.prototype, nativeParse = 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) {} 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 nativeParse.apply(this, arguments); } }; }(DOMParser));
Specifications
Specification | Status | Comment |
---|---|---|
DOM Parsing and Serialization The definition of 'DOMParser' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
DOMParser() constructor | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
parseFromString | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
parseFromString : XML (application/xml ) support | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
parseFromString : SVG (image/svg+xml ) support | Chrome Full support 4 | Edge Full support Yes | Firefox Full support 10 | IE Full support 10 | Opera Full support 15 | Safari Full support 3.2 | WebView Android ? | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support 10 | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android ? |
parseFromString : HTML (text/html ) support | Chrome Full support 31 | Edge Full support Yes | Firefox Full support 12 | IE Full support 10 | Opera Full support 17 | Safari Full support 9.1 | WebView Android ? | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support 14 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown