DOMParser

2 位贡献者:

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

DOMParser 可以将字符串形式的XML或HTML源代码解析成为一个 DOM文档. DOMParser的HTML5规范在 DOM解析和序列化.

另外, XMLHttpRequest也已经支持了直接将XML和HTML格式的URL资源解析为DOM文档(以前仅支持XML).

创建一个DOMParser

创建一个 DOMParser 对象可以使用new DOMParser().

如何在Firefox扩展中创建DOMParser,请参考文档 nsIDOMParser.

解析 XML

一旦建立了一个解析对象以后,你就可以使用它的parseFromString方法来解析一个XML字符串:

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

错误处理

如果解析失败, DOMParser 不会抛出任何异常, 只会返回一个给定的错误文档(查看 bug 45566):

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

解析错误会显示在错误控制台,包括文档的地址和错误的源代码.

解析SVG或者HTML文档

DOMParser也可以用来解析一个SVG文档(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)或者HTML文档 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9). 根据给定的MIME类型不同,parseFromString方法可能返回三种不同类型的文档.如果MIME类型是 text/xml, 则返回一个XMLDocument, 如果MIME类型是 text/svg+xml,则返回一个 SVGDocument, 如果MIME类型是 text/html, 则返回一个HTMLDocument.

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// 返回一个Document对象,但不是SVGDocument也不是HTMLDocument对象

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// 返回一个SVGDocument对象,同时也是一个Document对象.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html")
// 返回一个HTMLDocument对象,同时也是一个Document对象.

兼容其他浏览器的HTML DOMParser

/*
 * 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会抛出异常
	try {
		// 到不支持的类型,WebKit会返回null
		if ((new DOMParser).parseFromString("", "text/html")) {
			// text/html的解析原生支持
			return;
		}
	} catch (ex) {}
 
	DOMParser_proto.parseFromString = function(markup, type) {
		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
			var
			  doc = document.implementation.createHTMLDocument("")
			;
 
			doc.body.innerHTML = markup;
			return doc;
		} else {
			return real_parseFromString.apply(this, arguments);
		}
	};
}(DOMParser));

注意:上述代码中的document.implementation.createHTMLDocument在Firefox4.0上才实现,低于4.0上述代码无效.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
XML support (Yes) (Yes) (Yes) (Yes) (Yes)
SVG support ? 10.0 (10.0) ? ? ?
HTML support ? 12.0 (12.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
XML support (Yes) (Yes) ? (Yes) ?
SVG support ? 10.0 (10.0) ? ? ?
HTML support ? 12.0 (12.0) ? ? ?

相关链接

文档标签和贡献者

向此页面作出贡献: teoli, ziyunfei
最后编辑者: teoli,