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.
Syntax
let domparser = new DOMParser()
Methods
DOMParser.parseFromString()
Syntax
let doc = domparser.parseFromString(string, mimeType)
Return
Either Document
or XMLDocument
depending on the mimeType
argument.
Parameters
This method has 2 parameters (both required):
string
- The
DOMString
to be parsed. It must contain either HTML, xml, xhtml+xml, or svg document. mimeType
-
A
DOMString
. This string determines a class of the the method's return value. The possible values are the following:mimeType
doc.constructor
text/html
Document
text/xml
XMLDocument
application/xml
XMLDocument
application/xhtml+xml
XMLDocument
image/svg+xml
XMLDocument
Examples
Parsing XML
Once you have created a parser object, you can parse XML from a string using the parseFromString()
method:
let parser = new DOMParser() let 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 SVG or HTML
The DOMParser
can also be used to parse an 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 result will be anXMLDocument
- If the MIME type is
image/svg+xml
, the result will be anSVGDocument
- If the MIME type is
text/html
, the result will be anHTMLDocument
let parser = new DOMParser() let doc = parser.parseFromString(stringContainingXMLSource, "application/xml") // returns a Document, but not an SVGDocument nor an 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 an HTMLDocument, which also is a Document.
DOMParser HTML extension
/* * 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 |
---|---|---|
HTML Living Standard The definition of 'DOM parsing' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMParser | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
DOMParser() constructor | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 1.0 |
parseFromString | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
parseFromString : HTML (text/html ) support | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 12 | IE Full support 10 | Opera Full support 17 | Safari Full support 9.1 | WebView Android Full support 37 | Chrome Android Full support 31 | Firefox Android Full support 14 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 3.0 |
parseFromString : SVG (image/svg+xml ) support | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 10 | IE Full support 10 | Opera Full support 15 | Safari Full support 3.2 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 10 | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 1.0 |
parseFromString : XML (application/xml ) support | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
See also
- Parsing and serializing XML
XMLHttpRequest
XMLSerializer
JSON.parse()
- counterpart forJSON
documents.