DOMParser

DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document .

注意: XMLHttpRequest can parse XML and HTML directly from a URL-addressable resource, returning a Document in its response 特性。

You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the XMLSerializer 接口。

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.

句法

let domparser = new DOMParser()​​
					

方法

DOMParser.parseFromString()

句法

let doc = domparser.parseFromString(string, mimeType)
					

返回

Either Document or XMLDocument depending on the mimeType 自变量。

参数

This method has 2 parameters (both required):

string
DOMString to be parsed. It must contain either HTML , xml , xhtml+xml ,或 svg 文档。
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

范例

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

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.

  1. If the MIME type is text/xml , the result will be an XMLDocument
  2. If the MIME type is image/svg+xml , the result will be an SVGDocument
  3. If the MIME type is text/html , the result will be an HTMLDocument
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));
					

规范

规范 状态 Comment
HTML Living Standard
The definition of 'DOM parsing' in that specification.
实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
DOMParser Chrome 1 Edge 12 Firefox 1 IE 9 Opera 8 Safari 3.2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 2 Samsung Internet Android 1.0
DOMParser() 构造函数 Chrome 1 Edge 12 Firefox 1 IE 9 Opera 8 Safari 3.2 WebView Android Yes Chrome Android 18 Firefox Android Yes Opera Android Yes Safari iOS ? Samsung Internet Android 1.0
parseFromString Chrome 1 Edge 12 Firefox 1 IE 9 Opera 8 Safari 3.2 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
parseFromString : HTML ( text/html ) support Chrome 31 Edge 12 Firefox 12 IE 10 Opera 17 Safari 9.1 WebView Android 37 Chrome Android 31 Firefox Android 14 Opera Android ? Safari iOS ? Samsung Internet Android 3.0
parseFromString : SVG ( image/svg+xml ) support Chrome 4 Edge 12 Firefox 10 IE 10 Opera 15 Safari 3.2 WebView Android 37 Chrome Android 18 Firefox Android 10 Opera Android Yes Safari iOS ? Samsung Internet Android 1.0
parseFromString : XML ( application/xml ) support Chrome 1 Edge 12 Firefox 1 IE 9 Opera 8 Safari 3.2 WebView Android Yes Chrome Android 18 Firefox Android Yes Opera Android Yes Safari iOS ? Samsung Internet Android 1.0

图例

完整支持
完整支持
兼容性未知
兼容性未知

另请参阅