DOMParser

DOMParser インターフェイスは、XML / HTMLソースコードを文字列から DOM Document にパースする機能を提供します。

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.

構文

var domparser = new DOMParser();​​​​​​

メソッド 

DOMParser.parseFromString()

Syntax

var doc = domparser.parseFromString(string, mimeType)

戻り値

Either Document or XMLDocument depending on the mimeType argument.

引数

The method accepts 2 arguments (both are 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:

Examples

XML のパース

パーサーオブジェクトを作成すると、parseFromString() メソッドを用いて 文字列から XML をパースすることができます。

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

エラーのハンドリング

現在は、パース処理に失敗した場合、DOMParser は例外をスローせず、代わりにエラー文書を返すという点に注意して下さい (※参照: バグ 45566)

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

パースエラーはエラーコンソール にもエラーの発生した文書の URI (※後述) とともに表示されます。

SVG および HTML 文書のパース

DOMParser は SVG 文書のパース (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)、そして HTML 文書のパース (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) にも用いることができます。指定された MIME type によって動作は異なります。MIME type が text/xml の場合は XMLDocument 、image/svg+xml の場合は SVGDocument 、text/html の場合は HTMLDocument が返されます。

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// SVGDocument でも HTMLDocument でもなく、Document が返る

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// SVGDocument (Document) が返る

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// HTMLDocument (Document) が返る

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
	  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));

仕様

ブラウザー実装状況

関連情報

• XML のパースとシリアライズ
• XMLHttpRequest
• XMLSerializer
• Parsing HTML to DOM